/* ══ WELCOME MODAL ══ */
  .welcome-backdrop {
    position:fixed; inset:0; z-index:500;
    background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center;
    padding: max(env(safe-area-inset-top, 16px), 16px) 16px max(env(safe-area-inset-bottom, 16px), 16px);
    overflow-y:auto;
  }
  .welcome-backdrop.show { display:flex; }
  .welcome-card {
    background:var(--surface); border:1px solid var(--gold);
    border-radius:8px; padding:1.6rem 1.4rem; max-width:440px; width:100%;
    box-shadow:0 12px 48px rgba(0,0,0,0.7), 0 0 60px rgba(224,188,92,0.15);
    text-align:center; max-height:100%; overflow-y:auto;
  }
  .welcome-skull { font-size:34px; color:var(--gold); opacity:0.85; margin-bottom:0.4rem; }
  .welcome-title {
    font-family:'Cinzel',serif; font-size:1.45rem; font-weight:700;
    color:var(--gold); letter-spacing:0.08em; margin-bottom:0.3rem;
    text-shadow:0 0 24px rgba(224,188,92,0.3);
  }
  .welcome-tagline {
    color:var(--text-muted); font-size:0.9rem; letter-spacing:0.04em;
    margin-bottom:1.2rem;
  }
  .welcome-features {
    display:flex; flex-direction:column; gap:10px;
    text-align:left; margin-bottom:1.2rem;
  }
  .welcome-feature {
    display:flex; align-items:flex-start; gap:11px;
    font-size:0.88rem; color:var(--text); line-height:1.4;
  }
  .welcome-feature strong { color:var(--gold); font-weight:600; }
  .wf-icon { font-size:18px; flex-shrink:0; width:24px; text-align:center; }
  .welcome-tip {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:4px; padding:9px 12px; font-size:0.82rem;
    color:var(--text-muted); margin-bottom:1.1rem; text-align:left;
  }
  .welcome-tip strong { color:var(--gold); }
  .welcome-cta {
    width:100%; padding:14px; border-radius:5px;
    background:var(--gold); border:none; color:#000;
    font-family:'Cinzel',serif; font-size:0.95rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    transition:all 0.2s; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .welcome-cta:hover { background:var(--gold-light); box-shadow:0 4px 16px rgba(224,188,92,0.4); }
  .welcome-tiny { font-size:0.72rem; color:var(--text-dim); margin-top:0.7rem; font-style:italic; }
  [data-theme="contrast"] .welcome-cta { color:#000; }

  .welcome-secondary {
    width:100%; padding:11px; margin-top:8px; border-radius:5px;
    background:transparent; border:1px solid var(--border-bright); color:var(--text);
    font-family:'Cinzel',serif; font-size:0.82rem; font-weight:600;
    letter-spacing:0.08em; transition:all 0.2s; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .welcome-secondary:hover { color:var(--gold); border-color:var(--gold); background:rgba(224,188,92,0.06); }

  /* iOS install hint — ordered list of steps */
  .ios-hint-steps {
    list-style:none; padding:0; margin:0 0 1.2rem;
    display:flex; flex-direction:column; gap:11px;
    text-align:left;
  }
  .ios-hint-steps li {
    display:flex; align-items:flex-start; gap:11px;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:5px; padding:11px 12px;
    font-size:0.88rem; line-height:1.45; color:var(--text);
  }
  .ios-step-num {
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:var(--gold); color:#000;
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel',serif; font-weight:700; font-size:0.82rem;
  }
  .ios-step-text { flex:1; }
  .ios-step-text strong { color:var(--gold); font-weight:600; }
  .ios-share-glyph {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; vertical-align:middle;
    background:var(--surface); border:1px solid var(--border-bright);
    border-radius:4px; color:var(--blue-light); margin:0 2px;
  }

  /* Install banner — Android, slim and dismissible */
  .install-banner {
    position:fixed; left:12px; right:12px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index:200;
    display:none;
    align-items:center; gap:10px;
    background:var(--surface); border:1px solid var(--gold); border-radius:8px;
    padding:10px 12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(224,188,92,0.15);
    max-width:480px; margin:0 auto;
    animation: install-banner-slide 0.35s ease-out;
  }
  .install-banner.show { display:flex; }
  @keyframes install-banner-slide {
    from { transform:translateY(120%); opacity:0; }
    to { transform:translateY(0); opacity:1; }
  }
  .install-banner-icon { font-size:22px; flex-shrink:0; }
  .install-banner-text {
    flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;
    font-family:'Rajdhani',sans-serif; font-size:0.78rem; color:var(--text-muted);
    line-height:1.25;
  }
  .install-banner-text strong {
    font-family:'Cinzel',serif; font-size:0.85rem; color:var(--gold); font-weight:700;
    letter-spacing:0.04em;
  }
  .install-banner-action {
    flex-shrink:0; padding:8px 14px; border-radius:4px;
    background:var(--gold); border:none; color:#000;
    font-family:'Cinzel',serif; font-size:0.78rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
    transition:all 0.2s; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .install-banner-action:hover { background:var(--gold-light); }
  .install-banner-dismiss {
    flex-shrink:0; width:28px; height:28px; border-radius:4px;
    background:transparent; border:none; color:var(--text-muted);
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .install-banner-dismiss:hover { color:var(--text); background:var(--surface2); }
  [data-theme="contrast"] .install-banner-action { color:#000; }