/* Marquiz popup loader: skeleton shown from the click until the quiz frame has loaded */

.esc-ql{
  --esc-surface:#242424; --esc-surface-2:#2b2b2b; --esc-bar:rgba(255,255,255,.07); --esc-shine:rgba(255,255,255,.07);
  --esc-muted:#b3b3b3; --esc-border-strong:rgba(255,255,255,.16);
  --esc-accent:#ff0004; --esc-accent-text:#ff6b6d;
  --esc-r-sm:12px; --esc-r-lg:24px; --esc-r-pill:999px; --esc-tap:44px;
  position:fixed; inset:0; z-index:2147483647;
  display:flex; align-items:center; justify-content:center;
  padding:calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background:rgba(12,12,12,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:'Ubuntu',Arial,sans-serif; color:#fff;
  opacity:0; transition:opacity .25s ease-in-out, background-color .25s ease-in-out;
}
.esc-ql :where(*){ box-sizing:border-box; }
.esc-ql.is-on{ opacity:1; }
/* Marquiz already darkens the page underneath: drop our own veil so it does not double up. */
.esc-ql.is-handoff{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.esc-ql.is-out{ opacity:0; pointer-events:none; }

.esc-ql-card{
  position:relative; overflow:hidden; width:100%; max-width:1200px;
  height:min(650px, 100%);
  display:flex; flex-direction:column; gap:22px;
  padding:clamp(24px,4vw,48px);
  /* Square, borderless: the Marquiz frame that replaces it has no rounding */
  background:var(--esc-surface); border:0; border-radius:0;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.985); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.esc-ql.is-on .esc-ql-card{ transform:none; }
/* Same box as the Marquiz modal, so the quiz appears exactly where the skeleton was */
@media (min-width:1024px){ .esc-ql-card{ width:80vw; height:min(560px, 100%); } }
@media (min-width:1200px){ .esc-ql-card{ width:75vw; height:min(590px, 100%); } }
@media (min-width:1440px){ .esc-ql-card{ width:80vw; height:min(650px, 100%); } }

/* Indeterminate progress line along the top edge */
.esc-ql-card::before{
  content:""; position:absolute; top:0; left:0; height:3px; width:40%;
  background:linear-gradient(90deg, transparent, var(--esc-accent), transparent);
  animation:esc-ql-run 1.3s ease-in-out infinite;
}
@keyframes esc-ql-run{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }

.esc-ql-head{ display:flex; align-items:center; gap:12px; color:var(--esc-muted); font-size:15px; line-height:1.3; }
.esc-ql-dots{ display:inline-flex; gap:5px; }
.esc-ql-dots i{ width:7px; height:7px; border-radius:50%; background:var(--esc-accent); animation:esc-ql-dot 1s ease-in-out infinite; }
.esc-ql-dots i:nth-child(2){ animation-delay:.15s; }
.esc-ql-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes esc-ql-dot{ 0%,80%,100%{ opacity:.25; transform:scale(.8); } 40%{ opacity:1; transform:none; } }

.esc-ql-bar{ display:block; height:14px; border-radius:var(--esc-r-pill); background:var(--esc-bar); position:relative; overflow:hidden; }
.esc-ql-bar::after, .esc-ql-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, var(--esc-shine) 50%, transparent 80%);
  transform:translateX(-100%); animation:esc-ql-shine 1.6s ease-in-out infinite;
}
@keyframes esc-ql-shine{ to{ transform:translateX(100%); } }
.esc-ql-title{ height:30px; width:min(560px,85%); border-radius:10px; }
.esc-ql-sub{ width:min(360px,60%); }

.esc-ql-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.esc-ql-tile{ position:relative; overflow:hidden; border-radius:var(--esc-r-sm); background:var(--esc-surface-2); border:1px solid rgba(255,255,255,.05); }
.esc-ql-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.esc-ql-steps{ width:min(260px,45%); }
.esc-ql-btn{ height:48px; width:180px; border-radius:var(--esc-r-sm); background:rgba(255,0,4,.22); }

@media (max-width:1023px){
  .esc-ql{ padding:0; }
  .esc-ql-card{ max-width:none; height:100%; padding:calc(56px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .esc-ql-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
  .esc-ql-btn{ width:140px; }
}

.esc-ql-close{
  position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:12px; z-index:2;
  width:var(--esc-tap); height:var(--esc-tap); display:flex; align-items:center; justify-content:center;
  border-radius:var(--esc-r-pill); border:1px solid var(--esc-border-strong); background:rgba(0,0,0,.6); color:#fff;
  cursor:pointer; padding:0; font:inherit;
}
/* Marquiz draws its own close button once its window is under us */
.esc-ql.is-handoff .esc-ql-close{ display:none; }
.esc-ql-close svg{ width:20px; height:20px; }
.esc-ql-close:hover{ background:var(--esc-accent); border-color:var(--esc-accent); }
.esc-ql-close:focus-visible, .esc-ql-fail a:focus-visible{ outline:2px solid var(--esc-accent); outline-offset:3px; }

/* The quiz could not load (blocked host, dead network) — offer the direct link */
.esc-ql-fail{ display:none; position:absolute; inset:0; z-index:1; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; background:var(--esc-surface); }
.esc-ql.is-fail .esc-ql-fail{ display:flex; }
.esc-ql.is-fail .esc-ql-card::before{ display:none; }
.esc-ql-fail p{ margin:0; font-size:17px; line-height:1.4; max-width:420px; }
.esc-ql-fail a{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border-radius:6px; background:var(--esc-accent); color:#fff; text-decoration:none; font-weight:500; }
.esc-ql-fail a:hover{ background:#d40c10; }

/* Marquiz's own layer: same veil as ours, and the quiz fades in instead of flashing white */
.marquiz__bg{ background:rgba(12,12,12,.9) !important; }
.marquiz__frame_open{ animation:esc-ql-in .35s ease-out; }
@keyframes esc-ql-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .esc-ql, .esc-ql-card{ transition:none; }
  .esc-ql-card{ transform:none; }
  .esc-ql-card::before{ animation:none; width:100%; opacity:.6; }
  .esc-ql-bar::after, .esc-ql-tile::after{ animation:none; display:none; }
  .esc-ql-dots i{ animation:none; opacity:.7; }
  .marquiz__frame_open{ animation:none; }
}