/* ═══════════════════════════════════════════════════════════════
   🏆  VICTORY MODAL PREMIUM  v6.0 — UNIFIED DESIGN SYSTEM
   Sound Catcher · Musical Chairs · Phonics Fortress
   ─────────────────────────────────────────────────────────────
   Design: White card · Pill chips · Row buttons · Fredoka One
   Fixes : MC absolute centering · PF portrait lock · Uniform UI
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@600;700;800;900&display=swap');

/* ─────────────────────────────────────────────────────────────
   §0  ANIMATIONS
   ───────────────────────────────────────────────────────────── */
@keyframes vm-in        {from{opacity:0;transform:scale(.78) translateY(28px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes vm-fade      {from{opacity:0}to{opacity:1}}
@keyframes vm-emoji-pop {0%{transform:scale(0) rotate(-18deg)}65%{transform:scale(1.20) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes vm-star      {0%{transform:scale(0) rotate(-30deg)}65%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes vm-pulse     {0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vm-float     {0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes vm-shimmer   {0%{left:-100%}100%{left:200%}}
@keyframes vm-spin-phone{0%,100%{transform:rotate(0deg)}30%,70%{transform:rotate(-90deg)}}

/* ─────────────────────────────────────────────────────────────
   §1  OVERLAYS — full-screen centered backdrop
   ───────────────────────────────────────────────────────────── */
/* ═══ UNIFIED OVERLAY FIX — सर्व 3 games ═══
   100svh = browser chrome वगळून फक्त visible area
   align-items:center = perfect vertical center
   ════════════════════════════════════════════ */
#gameover-screen {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100svh !important;
  z-index:9000 !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  padding:16px !important; box-sizing:border-box !important;
  background:rgba(10,6,25,.82) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  animation:vm-fade .22s ease both !important; overflow-y:auto !important;
}
#gameover-screen.hidden{display:none !important;}

#end-ov {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100svh !important; margin:0 !important;
  z-index:9000 !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  padding:16px !important; box-sizing:border-box !important;
  background:rgba(10,6,25,.82) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  animation:vm-fade .22s ease both !important; overflow-y:auto !important;
}
#end-ov.hidden{display:none !important;}

/* MC scard — reset ALL game positioning */
#end-ov .scard,
#end-ov > .scard {
  position:relative !important; top:auto !important; left:auto !important;
  right:auto !important; bottom:auto !important; transform:none !important;
  margin:auto !important; float:none !important;
  min-height:unset !important; justify-content:unset !important;
}

#levelWinOverlay {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100svh !important;
  z-index:9000 !important; display:none;
  align-items:center !important; justify-content:center !important;
  padding:16px !important; box-sizing:border-box !important;
  background:rgba(10,6,25,.82) !important;
  backdrop-filter:blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  overflow-y:auto !important;
}
#levelWinOverlay.show{
  display:flex !important;
  animation:vm-fade .22s ease both !important;
}

/* ─────────────────────────────────────────────────────────────
   §2  WHITE PREMIUM CARD
   ───────────────────────────────────────────────────────────── */
.go-card,.scard,.overlay-box {
  width:min(96vw,500px) !important;
  max-width:96vw !important;
  max-height:96svh !important;
  overflow-y:auto !important; overscroll-behavior:contain !important;
  box-sizing:border-box !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:14px !important;
  padding:32px 28px 28px !important;
  /* White card + rainbow top stripe */
  background:
    linear-gradient(90deg,#7C3AED 0%,#EC4899 45%,#F59E0B 100%) top/100% 7px no-repeat,
    #FFFFFF !important;
  border-radius:30px !important; border:none !important;
  box-shadow:0 4px 0 rgba(124,58,237,.12),0 20px 50px rgba(0,0,0,.22),0 6px 20px rgba(124,58,237,.14) !important;
  animation:vm-in .44s cubic-bezier(0.22,1.6,0.36,1) both !important;
  font-family:'Nunito',sans-serif !important; color:#1E1B4B !important;
  position:relative !important; margin:auto !important;
  scrollbar-width:thin !important; scrollbar-color:#C4B5FD transparent !important;
}
.go-card::-webkit-scrollbar,.scard::-webkit-scrollbar,.overlay-box::-webkit-scrollbar{width:5px}
.go-card::-webkit-scrollbar-thumb,.scard::-webkit-scrollbar-thumb,.overlay-box::-webkit-scrollbar-thumb{
  background:#C4B5FD;border-radius:99px}

/* ─────────────────────────────────────────────────────────────
   §3  TROPHY / WIN EMOJI
   ───────────────────────────────────────────────────────────── */
.emoji-big,#gameover-emoji,#end-emoji,#winEmoji,.bemoji,.overlay-emoji {
  font-size:clamp(3rem,11vw,4.2rem) !important; line-height:1 !important;
  margin:4px 0 8px !important; display:block !important; text-align:center !important;
  filter:drop-shadow(0 5px 14px rgba(124,58,237,.40)) !important;
  animation:vm-emoji-pop .55s cubic-bezier(0.22,1.6,0.36,1) .10s both !important;
}

/* ─────────────────────────────────────────────────────────────
   §4  STARS
   ───────────────────────────────────────────────────────────── */
#star-rating-display,#winStars,.overlay-stars {
  display:flex !important; justify-content:center !important;
  gap:6px !important; margin:2px 0 8px !important;
  min-height:28px !important; width:100% !important;
}
#star-rating-display span,.star-earned {
  font-size:clamp(1.5rem,5.5vw,2rem) !important; display:inline-block !important;
  animation:vm-star .4s cubic-bezier(0.22,1.8,0.36,1) both !important;
  filter:drop-shadow(0 2px 6px rgba(245,158,11,.7)) !important;
}
#star-rating-display span:nth-child(2),.star-earned:nth-child(2){animation-delay:.10s !important}
#star-rating-display span:nth-child(3),.star-earned:nth-child(3){animation-delay:.20s !important}
#star-rating-display .star-empty,.star-empty {
  font-size:clamp(1.5rem,5.5vw,2rem) !important;
  opacity:.22 !important; filter:grayscale(1) !important; animation:none !important;
}
.star-pop {
  display:inline-block !important; font-size:clamp(1.5rem,5.5vw,2rem) !important;
  animation:vm-star .4s cubic-bezier(0.22,1.8,0.36,1) both !important;
  filter:drop-shadow(0 2px 6px rgba(245,158,11,.7)) !important; margin:0 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   §5  TITLE
   ───────────────────────────────────────────────────────────── */
#gameover-title,#end-title,#winTitle,.overlay-title,.go-card h1,.scard h1 {
  font-family:'Fredoka One',cursive !important;
  font-size:clamp(1.5rem,6vw,2.2rem) !important; font-weight:400 !important;
  color:#4C1D95 !important; text-align:center !important;
  margin:0 0 4px !important; line-height:1.15 !important;
  letter-spacing:.01em !important; text-shadow:none !important; width:100% !important;
}

/* ─────────────────────────────────────────────────────────────
   §6  SUB-MESSAGE
   ───────────────────────────────────────────────────────────── */
#gameover-msg,#end-msg,#winSub,.overlay-sub,.go-card p,.scard p {
  font-size:clamp(.78rem,2.6vw,.94rem) !important; color:#6B7280 !important;
  text-align:center !important; margin:0 0 10px !important;
  line-height:1.45 !important; font-weight:700 !important; width:100% !important;
}

/* ─────────────────────────────────────────────────────────────
   §7  ACCURACY BAR
   ───────────────────────────────────────────────────────────── */
#accuracy-bar-wrap {
  width:100% !important; height:12px !important; background:#EDE9FE !important;
  border-radius:99px !important; overflow:hidden !important; margin:0 0 5px !important;
  position:relative !important; box-sizing:border-box !important;
}
#accuracy-fill {
  height:100% !important; background:linear-gradient(90deg,#7C3AED,#EC4899) !important;
  border-radius:99px !important; transition:width 1.1s cubic-bezier(.4,0,.2,1) !important;
}
#accuracy-text {
  position:absolute !important; right:8px !important; top:50% !important;
  transform:translateY(-50%) !important; font-size:.6rem !important;
  font-weight:800 !important; color:#4C1D95 !important;
}
.accuracy-wrap{width:100% !important; margin:0 0 8px !important}
.accuracy-label{font-size:.72rem !important;color:#9CA3AF !important;font-weight:700 !important;margin-bottom:3px !important;display:block !important}
.accuracy-bar{width:100% !important;height:12px !important;background:#EDE9FE !important;border-radius:99px !important;overflow:hidden !important;position:relative !important}
.accuracy-fill,#winAccFill{
  height:100% !important; background:linear-gradient(90deg,#7C3AED,#EC4899) !important;
  border-radius:99px !important; transition:width 1.1s cubic-bezier(.4,0,.2,1) !important;
}
.accuracy-text,#winAccText{
  position:absolute !important;right:8px !important;top:50% !important;
  transform:translateY(-50%) !important;font-size:.6rem !important;
  font-weight:800 !important;color:#4C1D95 !important;
}

/* ─────────────────────────────────────────────────────────────
   §8  SCORE DISPLAY
   ───────────────────────────────────────────────────────────── */
#final-score,.final-score,#end-score,.fscore,#winScoreDisplay,.victory-score {
  font-family:'Fredoka One',cursive !important;
  font-size:clamp(1.4rem,5.5vw,2rem) !important; font-weight:400 !important;
  color:#7C3AED !important; text-align:center !important;
  margin:4px 0 12px !important; line-height:1 !important; width:100% !important;
  animation:vm-pulse 2.4s ease-in-out infinite !important;
}

/* ─────────────────────────────────────────────────────────────
   §9  UNIFIED WORD REPORT SYSTEM  (.vm-*)
   100% identical across all 3 games
   ───────────────────────────────────────────────────────────── */

/* Containers — all games */
#mc-word-report-container,#pf-word-report-container,#report-slot,#word-report {
  width:100% !important;
  max-height:clamp(180px,38svh,280px) !important;
  overflow-y:auto !important; overscroll-behavior:contain !important;
  background:#FAFAFF !important;
  border:1.5px solid #EDE9FE !important; border-radius:18px !important;
  padding:16px !important; margin:0 !important;
  box-sizing:border-box !important;
  scrollbar-width:thin !important; scrollbar-color:#C4B5FD transparent !important;
  box-shadow:0 4px 18px rgba(124,58,237,.10),0 1px 4px rgba(0,0,0,.06) !important;
  position:relative !important;
}
#mc-word-report-container::-webkit-scrollbar,
#pf-word-report-container::-webkit-scrollbar,
#word-report::-webkit-scrollbar{width:4px}
#mc-word-report-container::-webkit-scrollbar-thumb,
#pf-word-report-container::-webkit-scrollbar-thumb,
#word-report::-webkit-scrollbar-thumb{background:#C4B5FD;border-radius:99px}

/* Title */
.vm-wr-title {
  font-family:'Fredoka One',cursive !important;
  font-size:clamp(.88rem,2.8vw,1rem) !important;
  color:#5B21B6 !important; margin:0 0 4px !important; display:block !important;
}
/* Stats */
.vm-wr-stats {
  font-size:clamp(.72rem,2.2vw,.80rem) !important; color:#6B7280 !important;
  font-weight:700 !important; margin:0 0 10px !important; display:block !important;
}
/* Chips container */
.vm-wr-chips {
  display:flex !important; flex-wrap:wrap !important; gap:6px !important;
}
/* Individual chip */
.vm-chip {
  display:inline-flex !important; align-items:center !important; gap:3px !important;
  padding:5px 12px !important; border-radius:20px !important;
  font-size:clamp(.76rem,2.4vw,.86rem) !important; font-weight:800 !important;
  font-family:'Nunito',sans-serif !important;
  cursor:default !important; white-space:nowrap !important;
}
/* ✅ correct chip */
.vm-chip-ok {
  background:#EDE9FE !important; color:#4C1D95 !important;
  border:1.5px solid #C4B5FD !important;
}
/* ❌ missed chip */
.vm-chip-miss {
  background:#FFE4E6 !important; color:#9F1239 !important;
  border:1.5px solid #FCA5A5 !important;
}
/* Copy button — tiny floating icon, bottom-right of list */
.vm-copy-btn {
  display:block !important; margin-top:8px !important; margin-left:auto !important;
  padding:5px 10px !important; border-radius:10px !important;
  border:1.5px solid #DDD6FE !important; background:#F5F3FF !important;
  color:#7C3AED !important; font-size:.72rem !important; font-weight:700 !important;
  font-family:'Nunito',sans-serif !important; cursor:pointer !important;
  transition:background .18s,transform .12s !important; width:fit-content !important;
  height:auto !important; line-height:1.4 !important; letter-spacing:.01em !important;
}
.vm-copy-btn:active{transform:scale(.93) !important;background:#EDE9FE !important}

/* Backward compat — old .wr-* classes still work as fallback */
.wr-header{font-family:'Fredoka One',cursive !important;font-size:clamp(.88rem,2.8vw,1rem) !important;color:#5B21B6 !important;margin:0 0 4px !important;display:block !important}
.wr-stats{font-size:clamp(.72rem,2.2vw,.80rem) !important;color:#6B7280 !important;font-weight:700 !important;margin:0 0 8px !important;display:block !important}
.wr-section-title{font-size:clamp(.68rem,2vw,.76rem) !important;font-weight:800 !important;color:#9CA3AF !important;text-transform:uppercase !important;letter-spacing:.07em !important;margin:8px 0 4px !important;display:block !important}
.wr-pairs{display:flex !important;flex-direction:column !important;gap:3px !important}
.wr-pair{display:flex !important;align-items:center !important;gap:6px !important;padding:5px 9px !important;border-radius:9px !important;background:#F5F3FF !important;font-size:clamp(.76rem,2.4vw,.88rem) !important;font-weight:700 !important;color:#1E1B4B !important;border-left:3px solid #7C3AED !important}
.wr-pair.wr-missed{background:#FFF1F2 !important;border-left-color:#F43F5E !important;color:#9F1239 !important}
.wr-icon{font-size:1.1em !important;flex-shrink:0 !important}
.wr-target{font-weight:800 !important;color:#1E1B4B !important}
.wr-arrow{color:#C4B5FD !important;font-weight:400 !important}
.wr-correct{font-weight:800 !important;color:#059669 !important}
.wr-pair.wr-missed .wr-target{color:#BE123C !important}
.wr-pair.wr-missed .wr-correct{color:#BE123C !important}
.wr-pat{font-size:.65em !important;color:#9CA3AF !important;font-weight:600 !important;margin-left:auto !important}
.wr-sight{display:flex !important;flex-wrap:wrap !important;gap:5px !important;margin-top:3px !important}
.wr-sw{display:inline-flex !important;align-items:center !important;gap:3px !important;padding:4px 12px !important;border-radius:20px !important;background:#EDE9FE !important;font-size:clamp(.72rem,2.2vw,.82rem) !important;font-weight:800 !important;color:#4C1D95 !important}
.wr-sw.wr-missed{background:#FFE4E6 !important;color:#9F1239 !important}
.wr-copy,.pbtn.wr-copy,#btn-copy-list {
  display:block !important; margin-top:10px !important; margin-left:auto !important;
  padding:4px 12px !important; border-radius:8px !important;
  border:1px solid #C4B5FD !important; background:#F5F3FF !important;
  color:#7C3AED !important; font-size:.68rem !important; font-weight:700 !important;
  font-family:'Nunito',sans-serif !important; cursor:pointer !important;
  transition:background .18s,transform .12s !important; width:fit-content !important;
  height:auto !important; line-height:1.4 !important;
}
.wr-copy:active,.pbtn.wr-copy:active,#btn-copy-list:active{transform:scale(.95) !important;background:#EDE9FE !important}

/* Remedial hint */
#remedial-hint{width:100% !important;font-size:clamp(.70rem,2.1vw,.78rem) !important;border-radius:12px !important;margin:0 0 10px !important;line-height:1.5 !important;box-sizing:border-box !important}

/* ─────────────────────────────────────────────────────────────
   §10  THREE BUTTONS — SIDE BY SIDE (Android nav style)
   ───────────────────────────────────────────────────────────── */

/* Wrapper → always row */
.go-card > div:last-child,
.scard   > div:last-child,
.overlay-box > div:last-child {
  display:flex !important; flex-direction:row !important;
  gap:12px !important; width:100% !important; margin-top:4px !important;
  flex-wrap:nowrap !important; align-items:stretch !important;
}

/* Base */
#btn-replay,#btn-continue,#btn-map {
  display:flex !important; align-items:center !important;
  justify-content:center !important; gap:6px !important;
  width:auto !important; min-width:0 !important; flex:1 !important;
  height:52px !important; padding:0 10px !important; margin:0 !important;
  box-sizing:border-box !important; border-radius:20px !important;
  border:none !important; outline:none !important; cursor:pointer !important;
  font-family:'Fredoka One',cursive !important;
  font-size:clamp(.82rem,2.6vw,.96rem) !important; font-weight:400 !important;
  color:#fff !important; letter-spacing:.02em !important;
  text-shadow:0 1px 3px rgba(0,0,0,.25) !important;
  text-align:center !important; white-space:nowrap !important;
  -webkit-tap-highlight-color:transparent !important;
  user-select:none !important;
  transition:transform .12s,box-shadow .12s,filter .12s !important;
  position:relative !important; overflow:hidden !important;
}

/* Shimmer */
#btn-replay::after,#btn-continue::after,#btn-map::after {
  content:'' !important; position:absolute !important; top:0 !important;
  left:-100% !important; width:60% !important; height:100% !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent) !important;
  animation:vm-shimmer 3.5s ease-in-out infinite !important;
  pointer-events:none !important;
}

/* Replay — bright blue */
#btn-replay {
  background:linear-gradient(160deg,#60A5FA 0%,#3B82F6 50%,#2563EB 100%) !important;
  box-shadow:0 5px 0 #1D4ED8,0 8px 18px rgba(59,130,246,.35) !important;
}
#btn-replay:active{transform:translateY(4px) !important;box-shadow:0 1px 0 #1D4ED8,0 2px 6px rgba(59,130,246,.25) !important}

/* Continue — bright green (primary, slightly taller) */
#btn-continue {
  background:linear-gradient(160deg,#4ADE80 0%,#22C55E 50%,#16A34A 100%) !important;
  box-shadow:0 5px 0 #15803D,0 8px 18px rgba(34,197,94,.35) !important;
  height:56px !important; font-size:clamp(.88rem,2.8vw,1.02rem) !important;
  animation:vm-float 2.6s ease-in-out 1.2s infinite !important;
}
#btn-continue:active{transform:translateY(4px) !important;box-shadow:0 1px 0 #15803D,0 2px 6px rgba(34,197,94,.25) !important;animation:none !important}

/* Map — bright purple */
#btn-map {
  background:linear-gradient(160deg,#C084FC 0%,#A855F7 50%,#9333EA 100%) !important;
  box-shadow:0 5px 0 #7E22CE,0 8px 18px rgba(168,85,247,.35) !important;
}
#btn-map:active{transform:translateY(4px) !important;box-shadow:0 1px 0 #7E22CE,0 2px 6px rgba(168,85,247,.25) !important}

@media (hover:hover){
  #btn-replay:hover{filter:brightness(1.09) !important;transform:translateY(-2px) !important}
  #btn-continue:hover{filter:brightness(1.09) !important;transform:translateY(-2px) !important;animation:none !important}
  #btn-map:hover{filter:brightness(1.09) !important;transform:translateY(-2px) !important}
}

#go-btn-replay-lbl,#go-btn-continue-lbl,#go-btn-map-lbl {
  pointer-events:none !important; font-family:'Fredoka One',cursive !important;
  font-size:inherit !important; color:inherit !important;
}
#btn-continue[style*='opacity: 0.5'],
#btn-continue[style*='opacity:0.5']{
  filter:grayscale(.55) !important;cursor:not-allowed !important;animation:none !important;
}

/* ─────────────────────────────────────────────────────────────
   §11  PHONICS FORTRESS — FORCE PORTRAIT VIA CSS TRANSFORM
   Screen Orientation API (JS) = primary method (Android Chrome)
   CSS transform rotate = fallback (iOS Safari + unsupported)
   ─────────────────────────────────────────────────────────────
   Landscape मध्ये असताना overlay ला rotate(-90deg) करतो
   त्यामुळे content portrait मध्ये दिसतो — no blocking screen.
   Math: width=100svh, height=100vw, transform-origin:top left
         rotate(-90deg) translateX(-100%) → covers landscape screen
   ───────────────────────────────────────────────────────────── */

/* Portrait: नेहमीप्रमाणे दाखवा */
@media (orientation:portrait){
  #levelWinOverlay.show { display:flex !important; }
  #levelWinOverlay.show .overlay-box { display:flex !important; }
}

/* Landscape: CSS transform ने portrait मध्ये rotate करा */
@media (orientation:landscape){
  #levelWinOverlay.show {
    display:block !important;
    position:fixed !important;
    top:0 !important; left:0 !important;
    right:auto !important; bottom:auto !important;
    width:100svh !important;
    height:100vw !important;
    transform:rotate(-90deg) translateX(-100%) !important;
    transform-origin:top left !important;
    overflow-y:auto !important;
    /* flex centering आता manual — rotated box ला center करा */
    padding:0 !important;
    align-items:unset !important;
    justify-content:unset !important;
  }
  #levelWinOverlay.show .overlay-box {
    display:flex !important;
    /* Rotated portrait context: svh = landscape height (short side) */
    width:min(92svh,500px) !important;
    max-height:88vw !important;
    margin:auto !important;
    margin-top:max(8px,2vw) !important;
    overflow-y:auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   §12  LANDSCAPE SHORT-SCREEN (phone sideways for SC & MC)
   ───────────────────────────────────────────────────────────── */
@media (orientation:landscape) and (max-height:500px){
  .go-card,.scard {
    padding:10px 14px 12px !important; max-height:97svh !important;
  }
  .emoji-big,#gameover-emoji,#end-emoji,.bemoji {
    font-size:clamp(2rem,7vw,2.8rem) !important; margin:0 0 2px !important;
  }
  #gameover-title,#end-title,.go-card h1,.scard h1 {
    font-size:clamp(1.1rem,4vw,1.5rem) !important; margin:0 0 2px !important;
  }
  #gameover-msg,#end-msg {
    font-size:clamp(.68rem,2vw,.80rem) !important; margin:0 0 4px !important;
  }
  #final-score,.final-score,#end-score,.fscore {
    font-size:clamp(1.2rem,4.5vw,1.7rem) !important; margin:2px 0 6px !important;
  }
  #mc-word-report-container,#word-report {
    max-height:clamp(70px,20svh,120px) !important;
    padding:8px 10px !important; margin:0 0 6px !important;
  }
  #btn-replay,#btn-map{height:38px !important;font-size:clamp(.76rem,2.4vw,.88rem) !important}
  #btn-continue{height:42px !important;font-size:clamp(.80rem,2.5vw,.92rem) !important;animation:none !important}
}

/* ─────────────────────────────────────────────────────────────
   §13  SMALL PHONES ≤360px
   ───────────────────────────────────────────────────────────── */
@media (max-width:360px){
  .go-card,.scard,.overlay-box{padding:14px 12px 16px !important;border-radius:22px !important}
  #btn-replay,#btn-map{height:44px !important}
  #btn-continue{height:48px !important}
}

/* ─────────────────────────────────────────────────────────────
   §14  iOS SAFE AREA
   ───────────────────────────────────────────────────────────── */
#gameover-screen,#end-ov,#levelWinOverlay {
  padding-left:max(16px,env(safe-area-inset-left)) !important;
  padding-right:max(16px,env(safe-area-inset-right)) !important;
  padding-top:max(16px,env(safe-area-inset-top)) !important;
  padding-bottom:max(16px,env(safe-area-inset-bottom)) !important;
}