/* ═══════════════════════════════════════════
   Connectivity gate (conn-) — reconnect modal + toast.
   Sits above everything (hard gate). Theme-aware via
   the app CSS variables. backdrop-filter is scoped to
   .open only, so it never composites a blur layer while
   closed (keeps globe drag smooth on the WebView).
   ═══════════════════════════════════════════ */

.conn-modal{
  position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(20,16,12,0.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.conn-modal.open{
  opacity:1;visibility:visible;pointer-events:auto;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .28s ease;
}

.conn-card{
  width:100%;max-width:340px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:30px 26px 26px;
  text-align:center;
  box-shadow:var(--shadow-deep);
  transform:translateY(10px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.conn-modal.open .conn-card{transform:translateY(0) scale(1);}

.conn-icon{
  width:58px;height:58px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(198,138,58,0.12);
  color:var(--gold);
}

.conn-title{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:600;
  color:var(--text);
  margin:0 0 8px;
}

.conn-msg{
  font-family:'DM Sans',sans-serif;
  font-size:14px;line-height:1.5;font-weight:400;
  color:var(--muted-strong);
  margin:0 0 22px;
}

.conn-retry{
  appearance:none;-webkit-appearance:none;border:none;cursor:pointer;
  min-width:150px;padding:13px 30px;
  border-radius:26px;
  background:var(--gold);
  color:#fff;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(198,138,58,0.35);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.conn-retry:active{transform:scale(.96);}
.conn-retry.is-loading{opacity:.6;pointer-events:none;}

/* Shake when Retry is tapped but we're still offline */
.conn-card.is-shake{animation:connShake .45s ease;}
@keyframes connShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(3px);}
}

/* ── Back-online toast ── */
.conn-toast{
  position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:100001;
  transform:translateX(-50%) translateY(12px);
  max-width:80vw;
  padding:10px 18px;border-radius:22px;
  background:var(--text);color:var(--bg);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  box-shadow:var(--shadow-card);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.conn-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}