/* ════════════════════════════════════════════════════════════════════
   Add to Home Screen — floating "WORLDS" chip + guided install toasts.
   Branded for SCVFS Worlds (red #c8102e accent on a dark glass surface).
   Adapted from the Zwai scanner reference implementation.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --coach: #c8102e;           /* step-number circle fill = SCVFS logo red */
  --coach-bright: #ef4d63;    /* arrows + icons — a brighter red, visible on dark */
  --coach-on: #ffffff;        /* digit color on the red circle (red is dark) */
}

/* ── Floating "Add to Home Screen" chip (upper-left) — shows the WORLDS tile ── */
.a2hs{position:fixed;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:60;display:flex;align-items:center;gap:8px;padding:6px 11px 6px 6px;border:1px solid rgba(255,255,255,.18);background:rgba(18,18,20,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .12s,background .12s;animation:a2hsIn .45s ease both .6s}
.a2hs:active{transform:scale(.95)}
.a2hs:hover{background:rgba(18,18,20,.85)}
.a2hs-tile{width:34px;height:34px;border-radius:8px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.a2hs-label{font-family:inherit;font-size:.62rem;font-weight:700;line-height:1.1;letter-spacing:.02em;color:#fff;text-align:left;text-transform:uppercase}
.a2hs-label small{display:block;font-size:.92em;font-weight:500;opacity:.72;letter-spacing:.06em}
@keyframes a2hsIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Toast — bottom-center, supports multi-line install instructions ── */
.toast-wrap{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:8px;align-items:center;width:calc(100% - 32px);max-width:340px;pointer-events:none}
.toast{pointer-events:auto;width:100%;background:rgba(20,20,22,.97);color:#f5f5f5;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 15px;font-family:inherit;font-size:.84rem;line-height:1.4;box-shadow:0 10px 40px rgba(0,0,0,.55);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:none}
.toast b{color:var(--coach-bright,#ef4d63)}

/* ── Install coach: guided 2-step "Add to Home Screen" callout (iOS) ── */
.coach{position:fixed;z-index:9100;background:rgba(20,20,22,.98);color:#f5f5f5;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 16px;font-family:inherit;line-height:1.45;box-shadow:0 14px 50px rgba(0,0,0,.65);opacity:0;transition:opacity .28s ease,transform .28s ease}
.coach.show{opacity:1}
.coach .n{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--coach,#c8102e);color:var(--coach-on,#fff);font-size:.86rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.coach b{color:#fff}
.coach-br{width:auto;right:26px;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateY(12px)}
.coach-br.show{transform:none}
.coach-tap{display:flex;align-items:center;gap:9px;font-size:1.12rem;font-weight:700;color:#fff;white-space:nowrap}
.coach-top{left:50%;top:7%;width:auto;max-width:calc(100% - 14px);padding:16px 20px;transform:translate(-50%,-10px)}
.coach-top.show{transform:translate(-50%,0)}
.coach h4{font-size:.86rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--coach-bright,#ef4d63);margin:0 0 13px;padding-right:16px;text-align:center}
.coach-step{display:flex;align-items:center;gap:11px;margin-top:11px;font-size:1rem;white-space:nowrap}
.coach-step .ctxt{display:inline}
.coach-hint{margin-top:13px;font-size:.74rem;color:rgba(255,255,255,.5);text-align:center;letter-spacing:.02em}
.coach-x{position:absolute;top:9px;right:11px;color:rgba(255,255,255,.5);font-size:1rem;line-height:1;cursor:pointer;padding:4px;z-index:2}
.coach-arrow{position:absolute;right:14px;bottom:-30px;color:var(--coach-bright,#ef4d63);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));animation:coachBounce 1s ease-in-out infinite}
@keyframes coachBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.coach-tr{width:auto;right:14px;top:calc(48px + env(safe-area-inset-top));transform:translateY(-12px)}
.coach-tr.show{transform:none}
.coach-arrow-up{bottom:auto;top:-30px;animation:coachBounceUp 1s ease-in-out infinite}
@keyframes coachBounceUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.coach-bottom{left:50%;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;max-width:calc(100% - 14px);padding:16px 20px;transform:translate(-50%,12px)}
.coach-bottom.show{transform:translate(-50%,0)}