<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ramal</title>
  <style>
    :root{
      --bg: #000000;
      --panel: rgba(0, 0, 0, 0.3411764705882353);
      --panel-strong: rgba(0, 0, 0, 0.9215686274509803);
      --line: #63d9ff;
      --line-soft: rgba(99, 217, 255, 0.7843137254901961);
      --text: #f5fbff;
      --muted: #b6d8e6;
      --shadow: 0 0 18px rgba(0, 126, 167, 0.3176470588235294), 0 0 42px rgba(99, 217, 255, .10);
      --radius: 18px;
      --radius-sm: 14px;
      --border: 2px solid var(--line-soft);
    }

    *{ box-sizing:border-box; }
    html, body{ margin:0; min-height:100%; }
    body{
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        linear-gradient(rgba(3,6,14,.68), rgba(3,6,14,.78)),
        url("images/fundo.gif") center center / cover fixed no-repeat;
      overflow-x:hidden;
    }

    a{ color: inherit; text-decoration:none; }
    .page{
      min-height:100vh;
      display:grid;
      place-items:center;
      padding: 24px 16px;
      position:relative;
    }

    .menu-toggle{
      position:fixed;
      top:24px;
      right:12px;
      width:52px;
      height:52px;
      border-radius:16px;
      border:var(--border);
      background: rgba(8, 12, 24, .72);
      color: var(--text);
      display:grid;
      place-items:center;
      box-shadow: var(--shadow);
      z-index: 8;
    }

    .menu-toggle span{
      display:block;
      width:22px;
      height:2px;
      background: var(--line);
      position:relative;
    }
    .menu-toggle span::before,
    .menu-toggle span::after{
      content:"";
      position:absolute;
      left:0;
      width:22px;
      height:2px;
      background: var(--line);
    }
    .menu-toggle span::before{ top:-7px; }
    .menu-toggle span::after{ top:7px; }

    #menu{
      position:fixed;
      inset:0;
      opacity:0;
      pointer-events:none;
      transition: opacity .2s ease;
      z-index: 20;
    }
    #menu:target{
      opacity:1;
      pointer-events:auto;
    }

    .backdrop{
      position:absolute;
      inset:0;
      background: rgba(2, 5, 12, .55);
      backdrop-filter: blur(1px);
    }

    .menu-box{
      position:relative;
      width:min(92vw, 420px);
      margin: 10vh auto 0;
      background: var(--panel-strong);
      border: var(--border);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 22px 18px 18px;
    }

    .close{
      position:absolute;
      top:14px;
      right:14px;
      width:36px;
      height:36px;
      border-radius:12px;
      border:var(--border);
      display:grid;
      place-items:center;
      color: var(--line);
      background: rgba(255,255,255,.04);
    }

    .menu-logo{
      width:92px;
      height:92px;
      margin: 2px auto 10px;
      border: var(--border);
      border-radius: 18px;
      object-fit: cover;
      display:block;
      background:#09101e;
    }

    .menu-name{
      text-align:center;
      font-size: 1.2rem;
      margin: 0 0 14px;
      letter-spacing: .08em;
      text-shadow: 0 0 8px rgba(99, 217, 255, .25);
    }

    .menu-credit{
      text-align:center;
      color: var(--muted);
      font-size: .82rem;
      letter-spacing: .03em;
      margin: -8px 0 14px;
    }

    .copy-box{
      border: var(--border);
      border-radius: 14px;
      padding: 12px;
      background: rgba(255,255,255,.03);
      text-align:center;
      word-break: break-all;
      margin-bottom: 14px;
      color: var(--muted);
      font-size: .95rem;
    }

    .menu-actions{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .menu-actions a{
      border: var(--border);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(99,217,255,.18), rgba(255,255,255,.04));
      padding: 12px 10px;
      text-align:center;
      color: var(--text);
      font-weight: 700;
      font-size: .92rem;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }

    .shell{
      width:min(94vw, 760px);
      border: var(--border);
      border-radius: 26px;
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 18px;
      backdrop-filter: blur(8px);
    }

    .profile{
      border: var(--border);
      border-radius: 22px;
      background: rgba(255,255,255,.04);
      padding: 18px 16px 14px;
      text-align:center;
      margin-bottom: 16px;
    }

    .profile img{
      width: 118px;
      height: 118px;
      border-radius: 18px;
      object-fit: cover;
      border: var(--border);
      display:block;
      margin: 0 auto 12px;
      background: #0a1020;
    }

    .profile h1{
      margin: 0 0 10px;
      font-size: clamp(1.2rem, 3vw, 1.8rem);
      letter-spacing: .08em;
    }

    .profile p{
      margin: 0;
      text-align:center;
      line-height: 1.6;
      color: var(--muted);
      border: var(--border);
      border-radius: 16px;
      padding: 12px 12px 12px 12px;
      background: rgba(0,0,0,.18);
    }

    .links{
      display:grid;
      gap: 12px;
      margin-top: 14px;
    }

    .link-card{
      display:grid;
      gap: 8px;
    }

    .link-btn{
      min-height: 84px;
      border-radius: 18px;
      border: var(--border);
      overflow:hidden;
      position:relative;
      display:flex;
      align-items:center;
      gap: 14px;
      padding: 12px 14px;
      background: rgba(10, 16, 34, .72) center/cover no-repeat;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }

    .link-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(4,8,18,.72), rgba(4,8,18,.28));
    }

    .link-btn > *{ position:relative; z-index:1; }

    .link-btn img{
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      border: var(--border);
      background:#0a1020;
      flex:0 0 auto;
    }

    .link-text{
      color:#fff;
      font-weight:900;
      font-size: 1.7rem;
      letter-spacing: .03em;
      text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
    }

    .link-desc{
      margin: 0 2px 0 2px;
      color: var(--muted);
      font-size: .93rem;
      line-height:1.45;
      padding-left: 4px;
    }

    .notice{
      margin-top: 14px;
      border: var(--border);
      border-radius: 16px;
      overflow:hidden;
      background: rgba(255,255,255,.03);
    }

    .marquee{
      overflow:hidden;
      white-space:nowrap;
    }

    .marquee-track{
      display:inline-flex;
      width:max-content;
      animation: marquee 18s linear infinite;
    }

    .marquee span{
      display:inline-block;
      padding: 11px 18px;
      color: var(--line);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .88rem;
    }

    @keyframes marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); }
    }

    /* Selo verificado */
    .verified-badge{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      margin: 2px 0 12px;
      color: var(--muted);
      font-size: .82rem;
      letter-spacing:.02em;
    }
    .verified-badge svg{
      width:18px;
      height:18px;
      flex:0 0 auto;
      filter: drop-shadow(0 0 6px rgba(99,217,255,.6));
    }

    /* Botões rápidos: bitcoin, monero, chaves nostr, link do ramal */
    .quick-actions{
      display:flex;
      justify-content:center;
      gap:10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .quick-btn{
      width: 58px;
      height: 58px;
      border-radius: 16px;
      border: var(--border);
      background: rgba(255,255,255,.04);
      display:grid;
      place-items:center;
      color: var(--line);
      font-size: 1.5rem;
      font-weight:900;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
      text-shadow: 0 0 8px rgba(99, 217, 255, .35);
    }

    /* Popups genéricos: carteiras / chaves / link (mesmo esquema do #menu) */
    .popup{
      position:fixed;
      inset:0;
      opacity:0;
      pointer-events:none;
      transition: opacity .2s ease;
      z-index: 30;
    }
    .popup:target{
      opacity:1;
      pointer-events:auto;
    }
    .popup-box{
      position:relative;
      width:min(92vw, 380px);
      margin: 8vh auto 0;
      background: var(--panel-strong);
      border: var(--border);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 22px 18px 18px;
      max-height: 82vh;
      overflow-y: auto;
    }
    .popup-title{
      text-align:center;
      font-size: 1.05rem;
      margin: 4px 0 16px;
      letter-spacing: .06em;
      text-shadow: 0 0 8px rgba(99, 217, 255, .25);
    }

    /* Abas estilo lightning/on-chain e npub/nprofile (somente HTML/CSS, via radio) */
    .wallet-tabs{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .wallet-radio{
      position:absolute;
      opacity:0;
      width:0;
      height:0;
      pointer-events:none;
    }
    .wallet-tab-btn{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      border: var(--border);
      border-radius: 14px;
      padding: 10px 8px;
      background: rgba(255,255,255,.03);
      color: var(--muted);
      font-size:.85rem;
      font-weight:700;
      cursor:pointer;
      text-align:center;
    }

    .wallet-pane{ display:none; }

    #btc-ln:checked ~ .wallet-tabs label[for="btc-ln"],
    #btc-onchain:checked ~ .wallet-tabs label[for="btc-onchain"],
    #nostr-npub:checked ~ .wallet-tabs label[for="nostr-npub"],
    #nostr-nprofile:checked ~ .wallet-tabs label[for="nostr-nprofile"]{
      color: var(--text);
      background: linear-gradient(135deg, rgba(99,217,255,.18), rgba(255,255,255,.04));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }
    #btc-ln:checked ~ .wallet-content .pane-btc-ln,
    #btc-onchain:checked ~ .wallet-content .pane-btc-onchain,
    #nostr-npub:checked ~ .wallet-content .pane-nostr-npub,
    #nostr-nprofile:checked ~ .wallet-content .pane-nostr-nprofile{
      display:block;
    }

    .qr-box{
      border: var(--border);
      border-radius: 16px;
      overflow:hidden;
      margin: 0 auto 12px;
      width: min(100%, 220px);
      background:#050a14;
    }
    .qr-box img{ display:block; width:100%; height:auto; }

    @media (max-width: 560px){
      .shell{ padding: 14px; border-radius: 22px; }
      .profile img{ width: 104px; height: 104px; }
      .link-btn{ min-height: 78px; }
      .link-btn img{ width: 46px; height: 46px; }
      .menu-box{ margin-top: 12vh; }
      .menu-actions{ grid-template-columns: 1fr; }
      .quick-btn{ width: 52px; height: 52px; font-size: 1.3rem; }
      .popup-box{ margin-top: 6vh; }
    }
  </style>
</head>
<body>
  <a class="menu-toggle" href="#menu" aria-label="Abrir menu">
    <span></span>
  </a>

  <main class="page">
    <section class="shell" aria-label="Hub de links">
      <div class="profile">
        <img src="logo.jpg" alt="Logo do Baunilha" />
        <h1><b>[Baunilha]</b></h1>

        <div class="verified-badge">
          baunilha@nostraddress.com
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path fill="var(--line)" d="M12 2 14.09 4.26 17.14 3.5 17.9 6.55 20.95 7.31 20.19 10.36 22.45 12.45 20.19 14.54 20.95 17.59 17.9 18.35 17.14 21.4 14.09 20.64 12 22.9 9.91 20.64 6.86 21.4 6.1 18.35 3.05 17.59 3.81 14.54 1.55 12.45 3.81 10.36 3.05 7.31 6.1 6.55 6.86 3.5 9.91 4.26 Z"/>
            <path d="M8.7 12.4 10.9 14.6 15.3 10.1" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>

        <p>
          Bem vindo ao meu ramal!
          <br>Aqui é onde todas as vias se cruzam e se alinham.
          <br>Você pode encontrar todos os meus links por aqui.
        </p>

        <div class="quick-actions">
          <a class="quick-btn" href="#wallet-btc" aria-label="Endereços Bitcoin">₿</a>
          <a class="quick-btn" href="#wallet-xmr" aria-label="Endereço Monero">ɱ</a>
          <a class="quick-btn" href="#wallet-nostr" aria-label="Chaves Nostr">N</a>
          <a class="quick-btn" href="#wallet-ramal" aria-label="Link do meu Ramal">🔗</a>
        </div>
      </div>

      <div class="links">
        <div class="link-card">
          <a class="link-btn" href="https://jumble.social/users/npub1cp7q2jvfe9ehyp9zyn7szzfdslpu4jex0y3uxx9qh6zdde6ush6s02nqrh" target="_blank" rel="noopener noreferrer" style="background-image:url('images/botaoperfil.gif');">
            <img src="icons/nostr.png" alt="Sim, sou eu." />
            <div class="link-text">Perfil do [Baunilha]</div>
          </a>
          <p class="link-desc">Acesse meu perfil no Nostr.</p>
        </div>

        <div class="link-card">
          <a class="link-btn" href="" target="_blank" rel="noopener noreferrer" style="background-image:url('images/botaofunsub.gif');">
            <img src="logo.jpg" alt="Logo do link 2" />
            <div class="link-text">「Baunilha Funsub」</div>
          </a>
          <p class="link-desc">(EM BREVE) Meu site com meus torrents de anime.</p>
        </div>

        <div class="link-card">
          <a class="link-btn" href="https://gitworkshop.dev/baunilha@nostraddress.com/relay.ngit.dev/-Baunilha-Funsub-" target="_blank" rel="noopener noreferrer" style="background-image:url('images/botaogit.gif');">
            <img src="icons/gitworkshop.svg" alt="Logo do link 3" />
            <div class="link-text">Git workshop do [Baunilha]</div>
          </a>
          <p class="link-desc">Alguns projetos meus...</p>
        </div>

        <div class="link-card">
          <a class="link-btn" href="https://web.nostrord.com/#/g/groups.0xchat.com/baunilha-funsub" target="_blank" rel="noopener noreferrer" style="background-image:url('images/botaocomunidade2.gif');">
            <img src="icons/nostrord.png" alt="Logo do link 4" />
            <div class="link-text">Comunidade no Nostrord</div>
          </a>
          <p class="link-desc">Minha comunidade sobre animes e afins no Nostrord.</p>
        </div>

        <div class="link-card">
          <a class="link-btn" href="" target="_blank" rel="noopener noreferrer" style="background-image:url('images/botaobaunilhatv.gif');">
            <img src="logo.jpg" alt="Logo do link 5" />
            <div class="link-text">「Baunilha TV」</div>
          </a>
          <p class="link-desc">(EM BREVE)</p>
        </div>
      </div>

      <div class="notice" aria-label="Aviso em movimento">
        <div class="marquee">
          <div class="marquee-track">
            <span>Bem-vindo ao meu ramal • Torrent de Animes • TOR Friendly • Liberdade • Sem JavaScript • Sem Censura •</span>
            <span>Bem-vindo ao meu ramal • Torrent de Animes • TOR Friendly • Liberdade • Sem JavaScript • Sem Censura •</span>
          </div>
        </div>
      </div>
    </section>
  </main>

  <section id="menu" aria-label="Menu pop-up">
    <a class="backdrop" href="#" aria-label="Fechar menu"></a>
    <div class="menu-box">
      <a class="close" href="#" aria-label="Fechar">✕</a>
      <img class="menu-logo" src="logo.jpg" alt="Logo do menu" />
      <h2 class="menu-name"><b>[Baunilha]</b></h2>
      <p class="menu-credit">Criado por [Baunilha] usando o @Ramal</p>
      <div class="copy-box">https://algumacoisa.nostr.run</div>
      <div class="menu-actions">
        <a href="view-source:https://seudominio.com" target="_blank" rel="noopener noreferrer">Averiguar Código</a>
        <a href="https://seudominio.com">Quero um Ramal</a>
      </div>
    </div>
  </section>

  <section id="wallet-btc" class="popup" aria-label="Endereços Bitcoin">
    <a class="backdrop" href="#" aria-label="Fechar"></a>
    <div class="popup-box">
      <a class="close" href="#" aria-label="Fechar">✕</a>
      <h2 class="popup-title">Bitcoin</h2>

      <input class="wallet-radio" type="radio" name="btc-method" id="btc-ln" checked>
      <input class="wallet-radio" type="radio" name="btc-method" id="btc-onchain">

      <div class="wallet-tabs">
        <label class="wallet-tab-btn" for="btc-ln">⚡ Lightning</label>
        <label class="wallet-tab-btn" for="btc-onchain">⛓ On-chain</label>
      </div>

      <div class="wallet-content">
        <div class="wallet-pane pane-btc-ln">
          <div class="copy-box">baunilha@blitzwalletapp.com</div>
          <div class="qr-box">
            <img src="images/qr-codelightning.svg" alt="QR code do endereço Lightning" />
          </div>
        </div>
        <div class="wallet-pane pane-btc-onchain">
          <div class="copy-box">bc1pqpzzjhcerxssvwvtu0suzt09wun4g53p7hg2w6ckf4gjq3yhteyscf0rtt</div>
          <div class="qr-box">
            <img src="images/qr-codebitcoin.svg" alt="QR code do endereço Bitcoin on-chain" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="wallet-xmr" class="popup" aria-label="Endereço Monero">
    <a class="backdrop" href="#" aria-label="Fechar"></a>
    <div class="popup-box">
      <a class="close" href="#" aria-label="Fechar">✕</a>
      <h2 class="popup-title">Monero</h2>
      <div class="copy-box">877X8gc3zA1ABtjqd2vYuih4oLZMVgiwmiojDMGxJsZGWCVSJJwVqCZGWRfBVrM5gb6NZNnBMaJVEHJeLW7bjUqMHKP8gTP</div>
      <div class="qr-box">
        <img src="images/qr-codemonero.svg" alt="QR code do endereço Monero" />
      </div>
    </div>
  </section>

  <section id="wallet-nostr" class="popup" aria-label="Chaves Nostr">
    <a class="backdrop" href="#" aria-label="Fechar"></a>
    <div class="popup-box">
      <a class="close" href="#" aria-label="Fechar">✕</a>
      <h2 class="popup-title">Chaves Nostr</h2>

      <input class="wallet-radio" type="radio" name="nostr-method" id="nostr-npub" checked>
      <input class="wallet-radio" type="radio" name="nostr-method" id="nostr-nprofile">

      <div class="wallet-tabs">
        <label class="wallet-tab-btn" for="nostr-npub">npub</label>
        <label class="wallet-tab-btn" for="nostr-nprofile">nprofile</label>
      </div>

      <div class="wallet-content">
        <div class="wallet-pane pane-nostr-npub">
          <div class="copy-box">npub1cp7q2jvfe9ehyp9zyn7szzfdslpu4jex0y3uxx9qh6zdde6ush6s02nqrh</div>
          <div class="qr-box">
            <img src="images/qr-codenpub.svg" alt="QR code da npub" />
          </div>
        </div>
        <div class="wallet-pane pane-nostr-nprofile">
          <div class="copy-box">nprofile1qqsvqlq9fxyujumjqj3zflgppykc0s72evn8jg7rrzstapxkuawgtagppemhxue69uhkummn9ekx7mp0qyg8wumn8ghj7mn0wd68ytnddakj7qg4waehxw309aex2mrp0yhxgctdw4eju6t09u3m0z9l</div>
          <div class="qr-box">
            <img src="images/qr-codenprofile.svg" alt="QR code da nprofile" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="wallet-ramal" class="popup" aria-label="Link do meu Ramal">
    <a class="backdrop" href="#" aria-label="Fechar"></a>
    <div class="popup-box">
      <a class="close" href="#" aria-label="Fechar">✕</a>
      <h2 class="popup-title">Meu Ramal</h2>
      <div class="copy-box">https://seudominio.com</div>
      <div class="qr-box">
        <img src="images/qr-placeholder.svg" alt="QR code do link do meu Ramal" />
      </div>
    </div>
  </section>
</body>
</html>