/* Guided auto-tour chrome. Sits above everything; pure white-on-blue like the rest of Moqem. */
html.touring { scroll-behavior: auto !important; }
html.touring body { cursor: none; }
.tour-shield { position: fixed; inset: 0; z-index: 9990; background: transparent; }
.tour-bar { position: fixed; top: 0; inset-inline: 0; z-index: 9995; display: flex; align-items: center; gap: 14px; padding: 10px 18px 14px; background: rgba(0,35,75,.9); backdrop-filter: blur(10px); color: #fff; font-family: inherit; box-shadow: 0 8px 24px rgba(0,10,30,.35); }
.tour-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; white-space: nowrap; }
.tour-brand b { width: 28px; height: 28px; border-radius: 9px; background: #e0192e; display: grid; place-items: center; }
.tour-roles { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.tour-role { font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.1); white-space: nowrap; transition: all .4s; }
.tour-role.active { background: #fff; color: #004b93; transform: scale(1.05); }
.tour-role.done { background: rgba(62,224,143,.35); }
.tour-role.done::before { content: "✓ "; }
.tour-actions { display: flex; gap: 6px; }
.tour-btn { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 10px; padding: 6px 12px; font: 700 .82rem inherit; cursor: pointer; }
.tour-btn.stop { background: #e0192e; border-color: #e0192e; }
.tour-bar, .tour-bar * { cursor: pointer; }
.tour-progress { position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: rgba(255,255,255,.15); }
.tour-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ee08f, #fff); transition: width .8s ease; }
.tour-caption { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 9995; width: min(640px, calc(100vw - 32px)); background: #fff; color: #00346a; border-radius: 20px; padding: 16px 22px 16px; box-shadow: 0 24px 60px rgba(0,10,30,.45); border-inline-start: 6px solid #e0192e; }
.tour-caption.in { animation: tcIn .6s cubic-bezier(.2,.7,.2,1) both; }
.tour-caption strong { display: block; font-size: 1.15rem; margin-bottom: 2px; }
.tour-caption p { margin: 0; color: #3d5575; font-size: .95rem; }
.tc-count { float: left; font-size: .75rem; font-weight: 800; background: #eaf3ff; border-radius: 99px; padding: 2px 10px; }
@keyframes tcIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tour-hint { position: fixed; top: 70px; left: 50%; transform: translate(-50%, -10px); z-index: 9996; background: #ffc93c; color: #00346a; font-weight: 800; padding: 8px 16px; border-radius: 12px; opacity: 0; transition: all .3s; pointer-events: none; }
.tour-hint.on { opacity: 1; transform: translate(-50%, 0); }
.tour-scene { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #1a7fe0, #00346a 70%); opacity: 0; transition: opacity .5s; padding: 20px; }
.tour-scene.in { opacity: 1; }
.ts-card { text-align: center; color: #fff; max-width: 560px; animation: tcIn2 .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tcIn2 { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.ts-kicker { display: inline-block; background: #e0192e; border-radius: 99px; padding: 4px 16px; font-weight: 800; font-size: .85rem; }
.ts-card h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 14px 0 8px; font-weight: 800; }
.ts-card p { font-size: 1.15rem; color: rgba(255,255,255,.88); margin: 0 0 22px; }
.ts-loader { display: flex; justify-content: center; gap: 8px; }
.ts-loader i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: tsDot 1s infinite ease-in-out; }
.ts-loader i:nth-child(2) { animation-delay: .15s; } .ts-loader i:nth-child(3) { animation-delay: .3s; }
@keyframes tsDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
html.tour-leaving body > *:not(.tour-bar):not(.tour-caption) { opacity: .4; transition: opacity .35s; }
.tour-tap { box-shadow: 0 0 0 4px #ffc93c !important; }
/* invitation */
.tour-invite { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; background: rgba(0,20,50,.6); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; padding: 16px; }
.tour-invite.in { opacity: 1; }
.ti-card { background: #fff; color: #00346a; border-radius: 26px; padding: 28px; max-width: 460px; text-align: center; box-shadow: 0 30px 80px rgba(0,10,30,.5); animation: tcIn2 .6s both; }
.ti-card h3 { font-size: 1.45rem; margin: 12px 0 6px; color: #00346a; }
.ti-card p { color: #3d5575; margin: 0 0 18px; }
.ti-ring { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.ti-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ti-ring circle { fill: none; stroke: #e0192e; stroke-width: 4; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.ti-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.4rem; }
.ti-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ti-card .btn-ghost { color: #00346a; border-color: #b8c9dd; background: #f1f6fc; }
.ti-card .btn-link { color: #5b7494; }
.tour-launch { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 8px; }
.tour-launch .play { width: 0; height: 0; border-block: 6px solid transparent; border-inline-end: 9px solid #fff; }
@media (max-width: 640px) { .tour-brand span, .tour-launch { font-size: .75rem; } .tour-roles { display: none; } .tour-caption { bottom: 84px; } }
/* finish screen */
.done-page { position: fixed; inset: 0; overflow-y: auto; background: radial-gradient(120% 100% at 50% 0%, #1a7fe0 0%, #004b93 45%, #00346a 100%); display: grid; place-items: center; padding: 30px 16px; z-index: 1; }
.done-glow { position: fixed; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(224,25,46,.35), transparent 60%); top: -20vw; left: -10vw; filter: blur(30px); animation: floaty 12s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(30px); } }
.done-card { position: relative; max-width: 860px; text-align: center; color: #fff; animation: tcIn2 .9s both; }
.done-art { width: 170px; margin: 0 auto 6px; }
.done-card h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; margin: 12px 0 10px; }
.done-lead { font-size: 1.12rem; color: rgba(255,255,255,.9); max-width: 640px; margin: 0 auto 22px; line-height: 1.9; }
.done-eta { display: inline-flex; flex-direction: column; align-items: center; background: #fff; color: #00346a; border-radius: 22px; padding: 14px 34px; box-shadow: 0 20px 50px rgba(0,10,30,.35); margin-bottom: 26px; }
.done-eta span { font-weight: 700; } .done-eta b { font-size: 2.6rem; color: #e0192e; line-height: 1.2; }
.weeks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; text-align: right; }
.weeks li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; animation: tcIn2 .7s both; animation-delay: calc(.6s + var(--d) * .15s); }
.weeks .w { font-size: .75rem; font-weight: 800; background: #e0192e; border-radius: 99px; padding: 2px 10px; align-self: flex-start; }
.weeks strong { font-size: 1rem; } .weeks small { color: rgba(255,255,255,.8); font-size: .8rem; line-height: 1.6; }
.done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 820px) { .weeks { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Player (v2): one document + full-screen iframe → voice survives on iOS/Android.
   ========================================================================== */
html.tp-open, html.tp-open body { overflow: hidden !important; height: 100%; overscroll-behavior: none; }
.tp { position: fixed; inset: 0; z-index: 9980; display: flex; flex-direction: column; background: #00346a; font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; color: #fff;
  height: 100vh; height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.tp-bar { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(0,30,65,.96); box-shadow: 0 6px 20px rgba(0,10,30,.35); z-index: 3; }
.tp-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; white-space: nowrap; }
.tp-brand b { width: 30px; height: 30px; border-radius: 10px; background: #e0192e; display: grid; place-items: center; }
.tp-roles { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tp-roles::-webkit-scrollbar { display: none; }
.tp-role { font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.1); white-space: nowrap; transition: all .4s; }
.tp-role.active { background: #fff; color: #004b93; }
.tp-role.done { background: rgba(62,224,143,.35); }
.tp-role.done::before { content: "✓ "; }
.tp-btn { flex: none; min-width: 44px; min-height: 40px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 12px; padding: 6px 12px; font: 800 .88rem inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tp-btn.stop { background: #e0192e; border-color: #e0192e; }
.tp-progress { position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: rgba(255,255,255,.15); }
.tp-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ee08f, #fff); transition: width .8s ease; }
.tp-stage { position: relative; flex: 1; min-height: 0; }
.tp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #004b93; transition: opacity .35s, transform .35s; }
.tp-frame.loading { opacity: .25; transform: scale(.985); }
.tp-shield { position: absolute; inset: 0; z-index: 2; touch-action: none; }
.tp.finished .tp-shield { display: none; } /* finish screen is interactive */
.tp-caption { position: absolute; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%); z-index: 4;
  width: min(640px, calc(100vw - 24px)); background: #fff; color: #00346a; border-radius: 20px; padding: 14px 20px; box-shadow: 0 24px 60px rgba(0,10,30,.45); border-inline-start: 6px solid #e0192e; opacity: 0; }
.tp-caption.in { animation: tcIn .6s cubic-bezier(.2,.7,.2,1) both; opacity: 1; }
.tp-caption.gone { display: none; }
.tp-caption strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.tp-caption p { margin: 0; color: #3d5575; font-size: .95rem; line-height: 1.7; }
.tp-scene { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: radial-gradient(120% 120% at 50% 0%, #1a7fe0, #00346a 70%); opacity: 0; pointer-events: none; transition: opacity .45s; }
.tp-scene.in { opacity: 1; pointer-events: auto; }
.tp-hint { position: absolute; top: 76px; left: 50%; transform: translate(-50%, -8px); z-index: 6; background: #ffc93c; color: #00346a; font-weight: 800; padding: 8px 14px; border-radius: 12px; opacity: 0; transition: all .3s; pointer-events: none; text-align: center; max-width: calc(100vw - 24px); font-size: .9rem; }
.tp-hint.on { opacity: 1; transform: translate(-50%, 0); }
.tp-sound-pill { position: absolute; z-index: 7; left: 50%; top: 74px; transform: translateX(-50%); background: #fff; color: #00346a; border: 0; border-radius: 99px; padding: 12px 20px; font: 800 1rem inherit; box-shadow: 0 12px 30px rgba(0,10,30,.4); animation: pulseW 1.8s infinite; cursor: pointer; min-height: 48px; }
@keyframes pulseW { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.in-tour-frame .tour-launch, .in-tour-frame .wa-fab { display: none !important; }
.in-tour-frame body { cursor: default; }
@media (max-width: 640px) {
  .tp-brand span { display: none; }
  .tp-role { font-size: .72rem; padding: 4px 9px; }
  .tp-caption { padding: 12px 16px; border-radius: 16px; }
  .tp-caption strong { font-size: 1rem; } .tp-caption p { font-size: .86rem; }
  .ti-card { padding: 22px 18px; } .ti-row .btn { flex: 1 1 100%; min-height: 48px; }
  .ts-card p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .tp-sound-pill { animation: none; } }