/* =====================================================================
   Al Rabie — "Sweeter Together" mix kiosk
   Everything is laid out on a fixed 1080 x 1920 stage (the artboard size
   of the designs) that is scaled to fit whatever screen it runs on.
   ===================================================================== */

@font-face { font-family: 'PF Transport'; src: url('../fonts/PFTransport-Regular.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'PF Transport'; src: url('../fonts/PFTransport-Bold.otf') format('opentype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Ping AR LT'; src: url('../fonts/PingARLT-Regular.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Ping AR LT'; src: url('../fonts/PingARLT-Black.ttf') format('truetype'); font-weight: 900; font-display: block; }
@font-face { font-family: 'Aptos XB'; src: url('../fonts/Aptos-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: block; }

:root {
  --green: #2b7a45;
  --green-bright: #33a352;
  --white: #ffffff;
  --pill-fill: rgba(255, 255, 255, 0.17);
  --pill-edge: linear-gradient(118deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 26%, rgba(255,255,255,.16) 52%, rgba(255,255,255,.5) 78%, rgba(255,255,255,.98) 100%);
  --font-en: 'PF Transport', 'Avenir Next', 'Century Gothic', 'Segoe UI', sans-serif;
  --font-ar: 'Ping AR LT', 'Segoe UI', Tahoma, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #120d0a;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
img { display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* ---------- Stage ---------- */

.kiosk { position: fixed; inset: 0; overflow: hidden; }

/* Phone version (QR code link with ?mobile=1) */
.mobile-only { display: none !important; }
.is-mobile .mobile-only { display: flex !important; }
.done-new { left: 330px; top: 1792px; width: 420px; height: 92px; font-size: 40px; }

.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1080px; height: 1920px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(var(--scale, .4));
  overflow: hidden;
  font-family: var(--font-en);
  color: var(--white);
  background: #e09a3a;
}
.stage[data-lang="ar"] { font-family: var(--font-ar); }
.stage[data-lang="ar"] .en-only, .stage[data-lang="en"] .ar-only { display: none !important; }

/* ---------- Screens + transitions ---------- */

.screen {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
  z-index: 1;
}
.screen.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; z-index: 2; }
.screen.is-leaving { z-index: 1; }
.screen:not(.is-active) { pointer-events: none; }

.screen .anim { opacity: 0; }
.screen.is-active .anim { animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }

@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0), 0 10px 30px rgba(120,60,0,.18); } 50% { box-shadow: 0 0 0 14px rgba(255,255,255,.12), 0 10px 30px rgba(120,60,0,.18); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* ---------- Backgrounds (sampled from the designs) ---------- */

.bg-splash {
  --edge-top: #eab04f; --edge-bottom: #e09a38;
  --edge-top-img: linear-gradient(90deg, #e8ab3d 0%, #eab14d 45%, #f0cd8c 80%, #f4dcae 100%);
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(246, 228, 186, .95) 0%, rgba(246, 228, 186, 0) 62%),
    radial-gradient(70% 45% at 0% 45%, rgba(205, 112, 30, .55) 0%, rgba(205, 112, 30, 0) 70%),
    linear-gradient(180deg, #e8ab3c 0%, #e2a149 30%, #dc8d36 55%, #de9535 80%, #e09a38 100%);
}
.bg-form { --edge-top: #d6c9e2; --edge-bottom: #b0396a; background: linear-gradient(180deg, #d6c9e2 0%, #dccae1 26%, #d6a5c1 50%, #c8769a 73%, #b0396a 100%); }

.theme-pink {
  --arrow: #9b2535; --edge-top: #f3dde0; --edge-bottom: #8a1f2b;
  --edge-top-img: linear-gradient(90deg, #f2d8db 0%, #f4e0e2 50%, #fbf2f3 85%, #f8eaec 100%);
  background:
    radial-gradient(80% 30% at 85% 0%, rgba(255, 248, 249, .9) 0%, rgba(255, 248, 249, 0) 70%),
    linear-gradient(180deg, #f2d8db 0%, #e4aeb3 25%, #cd7f86 50%, #ad515b 75%, #8a1f2b 100%);
}
.theme-orange {
  --arrow: #df8e3e; --edge-top: #f4dab6; --edge-bottom: #dc8636;
  --edge-top-img: linear-gradient(90deg, #f3d7b0 0%, #f6e2c5 50%, #f3d7b0 100%);
  background:
    radial-gradient(90% 25% at 50% 0%, rgba(248, 232, 207, .85) 0%, rgba(248, 232, 207, 0) 80%),
    linear-gradient(180deg, #f3d6ae 0%, #ebbc80 25%, #e49f53 50%, #df8e3e 75%, #dc8636 100%);
}
.theme-blue {
  --arrow: #0a33a8; --edge-top: #c4ddfb; --edge-bottom: #00218f;
  background: linear-gradient(180deg, #c4ddfb 0%, #97b8ed 25%, #4975ce 50%, #103eb0 75%, #0029a4 92%, #00218f 100%);
}
.theme-green {
  --arrow: #1f6b3a; --edge-top: #e3f2df; --edge-bottom: #1f6b3a;
  background: linear-gradient(180deg, #e3f2df 0%, #b9dfb2 25%, #7fbf80 50%, #3f9356 75%, #1f6b3a 100%);
}
.theme-purple {
  --arrow: #5b2a86; --edge-top: #e7dcf2; --edge-bottom: #55247f;
  background: linear-gradient(180deg, #e7dcf2 0%, #cbb3e3 25%, #a27fcb 50%, #7a4ea8 75%, #55247f 100%);
}
.theme-gold {
  --arrow: #c98a12; --edge-top: #fbefcf; --edge-bottom: #c98a12;
  background: linear-gradient(180deg, #fbefcf 0%, #f4d98c 25%, #ecc157 50%, #dfa52c 75%, #c98a12 100%);
}

/* ---------- Persistent chrome: language button + mini tagline ---------- */

.lang-btn {
  position: absolute; z-index: 20; left: 52px; top: 40px;
  width: 116px; display: flex; flex-direction: column; align-items: center;
  color: var(--green);
}
.lang-btn svg { width: 86px; height: 86px; }
.lang-btn .lang-label { margin-top: 2px; font-family: var(--font-ar); font-size: 38px; line-height: 1; }
.stage[data-lang="ar"] .lang-btn .lang-label { font-family: var(--font-en); font-weight: 700; font-size: 20px; margin-top: 8px; letter-spacing: .5px; }
.lang-btn:active { transform: scale(.94); }

.mini-tagline {
  position: absolute; z-index: 20; right: 70px; top: 62px; width: 334px;
  opacity: 0; transition: opacity .4s ease;
}
.stage.show-mini .mini-tagline { opacity: 1; }

/* ---------- Glass edge: a gradient ring with a see-through middle ---------- */

.glass-btn::before, .opt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; padding: 4px;
  background: var(--pill-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: background .2s ease;
}

/* ---------- Glass buttons (PRESS TO START / START YOUR MIX / MIX) ---------- */

.glass-btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--pill-fill);
  color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  box-shadow: 0 10px 30px rgba(80, 30, 0, .12);
  transition: transform .15s ease, opacity .25s ease, filter .25s ease;
}
.stage[data-lang="ar"] .glass-btn { font-weight: 900; letter-spacing: 0; }
.glass-btn:active:not(:disabled) { transform: scale(.96); }
.glass-btn:disabled { filter: opacity(.45); cursor: default; }
.glass-btn.is-busy { pointer-events: none; }
.glass-btn.is-busy .btn-text { opacity: 0; }
.glass-btn .dots { position: absolute; display: none; gap: 14px; }
.glass-btn.is-busy .dots { display: flex; }
.glass-btn .dots i { width: 18px; height: 18px; border-radius: 50%; background: #fff; animation: dot 1s infinite ease-in-out; }
.glass-btn .dots i:nth-child(2) { animation-delay: .15s; }
.glass-btn .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: scale(.5); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }

/* ---------- Splash ---------- */

.splash-logo { position: absolute; left: 247px; top: 360px; width: 586px; }
.stage[data-lang="ar"] .splash-logo { left: 262px; top: 352px; width: 560px; }
.splash-hero { position: absolute; left: 25px; top: 671px; width: 1030px; }
.splash-tagline { position: absolute; left: 236px; top: 700px; width: 608px; z-index: 2; }
.stage[data-lang="ar"] .splash-tagline { left: 300px; top: 690px; width: 480px; }
.splash-start { left: 290px; top: 1677px; width: 500px; height: 100px; font-size: 50px; animation: glow 2.8s ease-in-out infinite; }
.splash-closed {
  position: absolute; left: 140px; right: 140px; top: 1660px; text-align: center;
  font-size: 54px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.stage[data-lang="ar"] .splash-closed { font-weight: 900; }

.screen-splash.is-active .splash-logo { animation: logoIn .9s var(--ease-spring) both; }
.screen-splash.is-active .splash-tagline { animation: write 1.1s ease-out .35s both; }
.screen-splash.is-active .splash-hero { animation: heroIn .9s var(--ease-out) .15s both, float 6s ease-in-out 1.2s infinite; }
@keyframes logoIn { from { opacity: 0; transform: translateY(-60px) scale(.9) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.stage[data-lang="ar"] .screen-splash.is-active .splash-tagline { animation-name: writeRtl; }
@keyframes writeRtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Registration form ---------- */

.reg-label {
  position: absolute; left: 208px; right: 208px;
  font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff;
}
.reg-label b, .reg-consent b { color: var(--green-bright); font-weight: 400; margin-inline-start: 4px; }
.lbl-name { top: 655px; }
.lbl-contact { top: 921px; }
.reg-input {
  position: absolute; left: 171px; width: 755px; height: 92px;
  border: 3px solid transparent; border-radius: 46px; outline: none;
  background: rgba(255, 255, 255, .74);
  padding: 0 44px; font: 400 40px/1 var(--font-en); color: #3a2a33;
  -webkit-user-select: text; user-select: text;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.stage[data-lang="ar"] .reg-input { font-family: var(--font-ar); }
.reg-input::placeholder { color: rgba(80, 60, 70, .45); }
.reg-input:focus { background: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .95); box-shadow: 0 8px 30px rgba(120, 30, 70, .18); }
.reg-input.is-invalid { border-color: #ffd1d1; animation: shake .4s ease; }
.in-name { top: 715px; }
.in-contact { top: 972px; }
.reg-error {
  position: absolute; left: 208px; right: 208px; top: 1078px;
  font-size: 30px; color: #fff; opacity: .95;
}
.reg-consent {
  position: absolute; left: 208px; top: 1104px;
  display: flex; align-items: center; gap: 18px;
  font-size: 40px; text-transform: uppercase; cursor: pointer;
}
.reg-consent input { position: absolute; opacity: 0; pointer-events: none; }
.reg-consent .box {
  width: 44px; height: 44px; flex: none; border: 3px solid #fff; border-radius: 8px;
  display: grid; place-items: center; transition: background .2s ease, border-color .2s ease;
}
.reg-consent .box svg { width: 30px; height: 30px; opacity: 0; transform: scale(.4); transition: all .25s var(--ease-spring); }
.reg-consent input:checked + .box { background: var(--green-bright); border-color: var(--green-bright); }
.reg-consent input:checked + .box svg { opacity: 1; transform: none; }
.reg-consent.is-invalid .box { animation: shake .4s ease; border-color: #ffd1d1; }
.reg-submit { left: 290px; top: 1371px; width: 500px; height: 98px; font-size: 50px; }

.stage[dir="rtl"] .reg-label, .stage[dir="rtl"] .reg-error { text-align: right; }
.stage[dir="rtl"] .reg-consent { left: auto; right: 208px; }
.stage[data-lang="ar"] .reg-consent, .stage[data-lang="ar"] .reg-label { text-transform: none; }

/* ---------- Step screens ---------- */

.step-title {
  position: absolute; left: 40px; right: 40px; top: 270px; margin: 0;
  text-align: center; font-weight: 700; font-size: 59px; line-height: 1.05;
  color: var(--green); text-transform: uppercase; letter-spacing: .5px;
}
.stage[data-lang="ar"] .step-title { font-weight: 900; font-size: 66px; top: 258px; letter-spacing: 0; }

.step-count {
  position: absolute; left: 0; right: 0; top: 386px; margin: 0 auto; width: max-content;
  min-width: 248px; height: 106px; padding: 0 36px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--green-bright); border-radius: 999px;
  font-size: 59px; font-weight: 700; white-space: nowrap;
}
.stage[data-lang="ar"] .step-count { font-weight: 900; font-size: 56px; }

.opts {
  position: absolute; left: 0; right: 0; top: 500px; height: 1040px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--gap, 140px);
}
.opts.with-extra { height: 840px; }
.opts.dense .opt { height: 96px; }
.opts.dense .kind-pack .opt-img { height: 136px; bottom: 14px; }
.opts.dense .kind-ing .opt-img { height: 160px; width: 210px; }
.opts.scroll { justify-content: flex-start; overflow-y: auto; padding: 70px 0 40px; }

.opt {
  position: relative; flex: none;
  width: 722px; height: 116px;
  border: 0; border-radius: 999px;
  background: var(--pill-fill);
  color: #fff;
  transition: color .2s ease, transform .15s ease;
}
.opt:active { transform: scale(.975); }
.opt.is-selected { color: var(--accent, var(--green)); }
.opt.is-selected::before { background: var(--accent, var(--green)); }
.opt.just-picked { animation: pop .35s ease; }
.opts.entering .opt { animation: rise .55s var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }

.opt-label {
  position: absolute; inset: 0 128px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 50px; line-height: 1.02; text-transform: uppercase; letter-spacing: .3px;
}
.opt.bold .opt-label { font-weight: 700; }
.stage[data-lang="ar"] .opt-label { font-size: 47px; text-transform: none; letter-spacing: 0; }
.stage[data-lang="ar"] .opt.bold .opt-label, .stage[data-lang="ar"] .opt-label { font-weight: 900; }

.opt-img { position: absolute; display: flex; pointer-events: none; }
.opt-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.kind-pack .opt-img { left: 58px; bottom: 20px; width: 96px; height: 166px; }
.kind-pack .opt-img img { object-position: 50% 100%; }
.kind-ing .opt-img { left: -14px; top: 50%; width: 250px; height: 196px; transform: translateY(-58%); }
.stage[dir="rtl"] .kind-pack .opt-img { left: auto; right: 58px; }
.stage[dir="rtl"] .kind-ing .opt-img { left: auto; right: -14px; }
.opt.just-picked .opt-img img { animation: bob .5s var(--ease-spring); }
@keyframes bob { 0% { transform: scale(1); } 45% { transform: scale(1.12) rotate(-4deg); } 100% { transform: scale(1); } }

/* Sparkling water (add-a-flavor step) */
.sparkle {
  position: absolute; left: 0; right: 0; top: 1362px;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  font-family: 'Aptos XB', var(--font-en); font-weight: 800; font-size: 56px; cursor: pointer;
}
.stage[data-lang="ar"] .sparkle { font-family: var(--font-ar); font-weight: 900; font-size: 56px; }
.sparkle input { position: absolute; opacity: 0; pointer-events: none; }
.sparkle .box {
  width: 54px; height: 54px; border-radius: 12px; background: #fff; flex: none;
  display: grid; place-items: center; transition: background .2s ease;
}
.sparkle .box svg { width: 36px; height: 36px; opacity: 0; transform: scale(.3); transition: all .25s var(--ease-spring); color: #fff; }
.sparkle input:checked + .box { background: var(--accent, var(--green)); }
.sparkle input:checked + .box svg { opacity: 1; transform: none; }
.sparkle .glass { width: 42px; height: 64px; }
.screen.is-active .sparkle, .screen.is-active .step-title, .screen.is-active .step-count { animation: rise .55s var(--ease-out) both; }
.screen.is-active .step-count { animation-delay: 60ms; }
.screen.is-active .sparkle { animation-delay: 420ms; }

/* Back / Next / Mix */
.nav-btn {
  position: absolute; top: 1700px; width: 160px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: #fff; transition: opacity .25s ease, transform .15s ease;
}
.nav-btn svg { width: 104px; height: 104px; color: var(--arrow, #9b2535); }
.nav-btn span { font-size: 44px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.stage[data-lang="ar"] .nav-btn span { font-weight: 900; font-size: 46px; }
.nav-btn:disabled { filter: opacity(.45); cursor: default; }
.nav-btn:active:not(:disabled) { transform: scale(.94); }
.nav-back { left: 176px; }
.nav-next { left: 748px; }
.nav-back svg { transform: scaleX(-1); }
.stage[dir="rtl"] .nav-back { left: 748px; }
.stage[dir="rtl"] .nav-next { left: 176px; }
.stage[dir="rtl"] .nav-back svg { transform: none; }
.stage[dir="rtl"] .nav-next svg { transform: scaleX(-1); }

.mix-btn { left: 690px; top: 1706px; width: 244px; height: 130px; font-size: 80px; }
.stage[dir="rtl"] .mix-btn { left: 146px; }
.stage[data-lang="ar"] .mix-btn { font-size: 80px; }
.mix-btn:not(:disabled) { animation: glow 2.4s ease-in-out infinite; }

/* ---------- Done ---------- */

.done-head { position: absolute; left: 0; right: 0; top: 178px; text-align: center; line-height: 1; }
.done-head .l1 { display: block; font-size: 91px; }
.done-head .l2 { display: block; font-size: 360px; line-height: .8; margin-top: 14px; letter-spacing: 2px; }
.done-head .l3 { display: block; font-size: 68px; margin-top: 20px; }
.done-head.ar-only { top: 240px; font-weight: 900; }
.done-head.ar-only .l1 { font-size: 108px; }
.done-head.ar-only .l2 { font-size: 142px; line-height: 1.05; margin-top: 0; letter-spacing: 0; }
.done-head.ar-only .l3 { font-size: 124px; margin-top: 0; line-height: 1.1; }

.done-card {
  position: absolute; left: 228px; top: 775px; width: 624px; height: 448px;
  background: #fff; border-radius: 22px; color: var(--green);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 26px 20px 30px; box-shadow: 0 20px 50px rgba(120, 60, 0, .2);
}
.done-card .t1 { font-size: 58px; line-height: 1; }
.done-card .num { font-size: 300px; font-weight: 700; line-height: .78; letter-spacing: -6px; }
.done-card .t2 { font-size: 60px; line-height: 1; }
.stage[data-lang="ar"] .done-card .t1, .stage[data-lang="ar"] .done-card .t2 { font-size: 42px; font-weight: 400; }
.stage[data-lang="ar"] .done-card .num { font-weight: 900; font-size: 270px; line-height: .9; letter-spacing: 0; }

.done-collect { position: absolute; left: 0; right: 0; top: 1330px; text-align: center; font-weight: 700; font-size: 88px; line-height: 1.2; }
.done-collect span { display: block; }
.stage[data-lang="ar"] .done-collect { font-weight: 900; font-size: 104px; top: 1290px; line-height: 1.15; }
.done-tagline { position: absolute; left: 248px; top: 1598px; width: 620px; }
.stage[data-lang="ar"] .done-tagline { left: 240px; top: 1590px; width: 600px; }

.screen-done.is-active .done-head .l2 { animation: mixIn .8s var(--ease-spring) .1s both; }
.screen-done.is-active .done-card { animation: cardIn .7s var(--ease-spring) .35s both; }
.screen-done.is-active .done-card .num { animation: numIn .7s var(--ease-spring) .7s both; }
.screen-done.is-active .done-collect { animation: rise .6s var(--ease-out) .9s both; }
.screen-done.is-active .done-tagline { animation: write 1.1s ease-out 1.1s both; }
.stage[data-lang="ar"] .screen-done.is-active .done-tagline { animation-name: writeRtl; }
@keyframes mixIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(80px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes numIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ---------- Toast + idle overlay ---------- */

.toast {
  position: absolute; z-index: 40; left: 50%; bottom: 300px; transform: translate(-50%, 30px);
  max-width: 900px; padding: 30px 50px; border-radius: 40px;
  background: rgba(30, 20, 20, .88); color: #fff; font-size: 38px; text-align: center; line-height: 1.25;
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.idle {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background: rgba(20, 12, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .3s ease both;
}
.idle[hidden] { display: none; }
.idle h2 { margin: 0; font-size: 80px; font-weight: 700; }
.idle p { margin: 0; font-size: 44px; opacity: .9; }
.stage[data-lang="ar"] .idle h2 { font-weight: 900; }
.idle .ring { position: relative; width: 220px; height: 220px; }
.idle .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.idle .ring circle { fill: none; stroke-width: 12; }
.idle .ring .track { stroke: rgba(255,255,255,.2); }
.idle .ring .bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 628; stroke-dashoffset: 0; }
.idle .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 90px; font-weight: 700; }

/* Unavailable / offline notice on the splash */
.notice { position: absolute; left: 120px; right: 120px; top: 1600px; text-align: center; font-size: 36px; opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}