/* Escape Tilt City v22.5: "Watch the story" pill + the floating modal player (etc/story.js) */
.st-pill{display:inline-flex;align-items:center;gap:8px;flex:none;border-radius:999px;cursor:pointer;font:600 13px/1 var(--disp);color:var(--ink);
  padding:5px 13px 5px 5px;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .15s ease}
.st-pill .st-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;
  background:radial-gradient(circle at 32% 28%,#f0cf86,#c99a3c 60%,#8a6a1e);box-shadow:0 0 0 3px rgba(226,186,92,.22)}
.st-pill .st-ic svg{width:12px;height:12px;fill:currentColor;margin-left:1px}
.st-pill small{font:600 11px/1 var(--ui);color:var(--soft);letter-spacing:.02em}
.st-pill:hover{transform:translateY(-1px)}
.st-pill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* laptop (Orbit): beside the caption pill, above Today */
.st-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:auto;flex-wrap:wrap}
.r2h .st-row .r2-cap{margin-bottom:0}
.st-lap{height:34px;text-shadow:var(--txs,none)}
/* phone: under the caption pill, in the open sky (same glass as the caption) */
.st-phone{display:none;align-self:center;margin-top:8px;height:36px;background:var(--glass,rgba(18,25,33,.7));border:1px solid var(--glass-line,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 8px 22px rgba(8,16,28,.22)}
.hdock .hd-cap+.st-phone{display:inline-flex}

/* ---------- the player ---------- */
.st-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(6,10,16,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .22s ease}
.st-modal.on{opacity:1}
.st-modal[hidden]{display:none}
.st-card{--vw:min(1120px,calc(100vw - 64px),calc((100dvh - 150px) * 16 / 9));width:var(--vw);border-radius:22px;overflow:hidden;
  background:rgba(18,25,33,.86);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.5);transform:translateY(10px) scale(.985);transition:transform .25s cubic-bezier(.22,.8,.25,1)}
:root:not([data-mode="dark"]) .st-card{background:rgba(250,252,254,.9);border-color:rgba(255,255,255,.7)}
.st-modal.on .st-card{transform:none}
.st-modal.tall .st-card{--vw:min(420px,calc(100vw - 32px),calc((100dvh - 120px) * 9 / 16));border-radius:20px}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px}
.st-head small{display:block;font:600 10px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.st-head b{display:block;font:600 17px/1.2 var(--disp);color:var(--ink);margin-top:3px}
.st-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:rgba(127,140,155,.16);border:1px solid rgba(127,140,155,.22)}
.st-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.st-x:focus-visible,.st-unmute:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.st-stage{position:relative;background:#000;aspect-ratio:16/9}
.st-modal.tall .st-stage{aspect-ratio:9/16}
.st-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
.st-unmute{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;cursor:pointer;
  font:600 14px/1 var(--disp);color:#fff;background:rgba(10,16,24,.72);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);animation:st-pulse 2.4s ease-in-out infinite}
.st-unmute svg{width:20px;height:20px;fill:currentColor}
.st-unmute[hidden]{display:none}
@keyframes st-pulse{50%{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 6px rgba(226,186,92,.18)}}
@media (prefers-reduced-motion:reduce){.st-modal,.st-card{transition:none}.st-unmute{animation:none}}
@media (orientation:landscape) and (max-height:500px){.st-head{padding:6px 8px 6px 14px}.st-head b{font-size:15px}.st-x{width:32px;height:32px}
  .st-card{--vw:min(1120px,calc(100vw - 48px),calc((100dvh - 80px) * 16 / 9))}.st-unmute{bottom:56px}}
body.st-open{overflow:hidden}