/* === Glass nav buttons that slide in top → down === */
  .glass-nav{
    position:absolute; top:0; left:50%;
    transform:translateX(-50%);
    display:flex; gap:14px;
    padding:18px 22px;
    z-index:5;
    pointer-events:none;
  }
  .glass-nav .gbtn{
    pointer-events:auto;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:118px; padding:11px 22px;
    font:600 13px/1 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    letter-spacing:.14em; text-transform:uppercase;
    color:#fff; text-decoration:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
      rgba(8,12,22,.55);
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px;
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:
      0 8px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(255,255,255,.08);
    opacity:0;
    transform:translate3d(0,-120%,0);
    transition:opacity .55s ease, transform .75s cubic-bezier(.22,.85,.25,1), background .25s ease, border-color .25s ease;
    will-change:transform,opacity;
    isolation:isolate;
    overflow:hidden;
    -webkit-mask-image:-webkit-radial-gradient(white,black);
    font-family:inherit; cursor:pointer;
  }
  .glass-nav .gbtn:hover,
  .glass-nav .gbtn:focus-visible{
    background:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)),
      rgba(12,18,30,.65);
    border-color:rgba(255,255,255,.42);
    outline:none;
  }
  .glass-nav .gbtn.is-active{
    background:
      linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10)),
      rgba(14,20,34,.7);
    border-color:rgba(255,255,255,.55);
    box-shadow:
      0 10px 30px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.4),
      0 0 0 1px rgba(255,255,255,.18);
  }
  .ended .glass-nav .gbtn{ opacity:1; transform:translate3d(0,0,0); }
  .ended .glass-nav .gbtn:nth-child(1){ transition-delay:1.05s, 1.05s, 0s, 0s; }
  .ended .glass-nav .gbtn:nth-child(2){ transition-delay:1.20s, 1.20s, 0s, 0s; }
  .ended .glass-nav .gbtn:nth-child(3){ transition-delay:1.35s, 1.35s, 0s, 0s; }
  .ended .glass-nav .gbtn:nth-child(4){ transition-delay:1.50s, 1.50s, 0s, 0s; }
  .ended .glass-nav .gbtn:nth-child(5){ transition-delay:1.65s, 1.65s, 0s, 0s; }
  .ended .glass-nav .gbtn:nth-child(6){ transition-delay:1.80s, 1.80s, 0s, 0s; }

  @media (prefers-reduced-motion: reduce){
    .glass-nav .gbtn{ transition:opacity .3s ease; transform:none; }
  }
  @media (max-width: 720px){
    .glass-nav{
      top:48px;
      gap:6px; padding:8px 8px;
      flex-wrap:nowrap;
      justify-content:center; align-items:stretch;
      width:calc(100% - 12px);
      box-sizing:border-box;
    }
    .glass-nav .gbtn{
      flex:1 1 0; min-width:0;
      padding:8px 4px; font-size:10px;
      letter-spacing:.06em; border-radius:10px;
      white-space:nowrap;
    }
  }
  @media (max-width: 380px){
    .glass-nav{ top:42px; gap:4px; padding:6px 6px; }
    .glass-nav .gbtn{ font-size:9px; padding:7px 2px; letter-spacing:.04em; border-radius:9px; }
  }

  /* === Glass info panel === */
  .glass-panel{
    position:absolute; top:90px; left:50%;
    transform:translate(-50%,-12px);
    translate: var(--gp-dx,0px) var(--gp-dy,0px);
    width:min(720px, 92%);
    max-height:min(70vh, 560px);
    overflow:auto;
    padding:26px 30px 28px;
    color:#fff;
    background:rgba(20,22,30,.42);
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:
      0 24px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.06);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease, transform .45s cubic-bezier(.22,.85,.25,1), translate .18s cubic-bezier(.22,.85,.25,1);
    z-index:6;
  }
  .glass-panel[data-open="1"]{
    opacity:1;
    transform:translate(-50%,0);
    pointer-events:auto;
  }
  .glass-panel.is-ejecting{
    transition: translate .55s cubic-bezier(.4,.05,.85,.35), opacity .55s ease, transform .55s ease !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .glass-panel .gp-title{
    margin:0 0 12px; padding:0 36px 0 0;
    font:600 20px/1.2 'Inter',system-ui,sans-serif;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .glass-panel .gp-body{
    font:400 15px/1.55 'Inter',system-ui,sans-serif;
    color:rgba(255,255,255,.88);
  }
  .glass-panel .gp-body p{ margin:0 0 10px; }
  .glass-panel .gp-body p:last-child{ margin-bottom:0; }

  /* Social tiles inside Community panel */
  .gp-socials{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:12px;
    margin-top:18px;
  }
  .gp-soc{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px;
    padding:16px 8px 14px;
    color:#fff; text-decoration:none;
    cursor:pointer;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.20);
    border-radius:14px;
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    box-shadow:
      0 6px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.05);
    transition:transform .25s cubic-bezier(.22,.85,.25,1),
               background .25s ease, border-color .25s ease,
               box-shadow .25s ease;
    overflow:hidden;
  }
  .gp-soc::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%);
    pointer-events:none;
  }
  .gp-soc:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.45);
    transform:translateY(-3px);
    box-shadow:
      0 12px 26px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.32),
      0 0 0 1px rgba(255,255,255,.10);
  }
  .gp-soc svg{
    width:26px; height:26px;
    fill:#fff;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  }
  .gp-soc .gp-soc-name{
    font:600 11px/1 'Inter',system-ui,sans-serif;
    letter-spacing:.10em; text-transform:uppercase;
    color:rgba(255,255,255,.92);
  }
  @media (max-width: 720px){
    .gp-socials{ grid-template-columns:repeat(3, 1fr); gap:10px; }
    .gp-soc{ padding:12px 6px 10px; border-radius:12px; }
    .gp-soc svg{ width:22px; height:22px; }
    .gp-soc .gp-soc-name{ font-size:10px; }
  }

  /* Community panel: header + per-tile follow toggle + progress */
  .gp-comm-head{ font:400 15px/1.55 'Inter',system-ui,sans-serif; color:rgba(255,255,255,.88); margin:0 0 4px; }
  .gp-comm-head strong{ color:#fff; font-weight:700; }
  .gp-soc-wrap{ position:relative; }
  .gp-soc-tog{
    position:absolute; top:6px; right:6px;
    width:22px; height:22px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.30);
    color:rgba(255,255,255,.55);
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    z-index:2;
    appearance:none; -webkit-appearance:none;
  }
  .gp-soc-tog svg{ width:12px; height:12px; display:block; }
  .gp-soc-tog:hover{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.55);
    color:#fff;
  }
  .gp-soc-tog[aria-pressed="true"]{
    background:#bfe2ff;
    border-color:#bfe2ff;
    color:#0a1722;
    transform:scale(1.05);
    box-shadow:0 0 10px rgba(190,230,255,.55);
  }
  .gp-soc.is-followed{
    background:rgba(190,230,255,.16);
    border-color:rgba(190,230,255,.55);
    box-shadow:
      0 8px 22px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.32),
      0 0 0 1px rgba(190,230,255,.20);
  }

  /* Progress bar with two milestones */
  .gp-progress{
    margin-top:22px;
    padding:14px 22px 20px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
  }
  .gp-progress-head{
    display:flex; justify-content:space-between; align-items:baseline;
    font:600 11px/1 'Inter',system-ui,sans-serif;
    letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.78);
    margin-bottom:14px;
  }
  .gp-progress-head .gp-progress-count{ color:#fff; font-size:13px; letter-spacing:.06em; }
  .gp-progress-track{
    position:relative;
    height:8px;
    border-radius:6px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    overflow:visible;
  }
  .gp-progress-fill{
    position:absolute; left:0; top:0; bottom:0;
    border-radius:6px;
    background:linear-gradient(90deg, #ffffff 0%, #bfe2ff 50%, #aee0ff 100%);
    box-shadow:0 0 12px rgba(190,230,255,.55);
    transition:width .6s cubic-bezier(.22,.85,.25,1);
    width:0%;
  }
  .gp-milestone{
    position:absolute; top:50%;
    width:14px; height:14px;
    margin:-8px 0 0 -7px;
    border-radius:50%;
    background:rgba(20,22,30,.85);
    border:1.5px solid rgba(255,255,255,.45);
    transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .gp-milestone.reached{
    background:#bfe2ff;
    border-color:#fff;
    box-shadow:0 0 10px rgba(190,230,255,.85);
  }
  .gp-milestone-label{
    position:absolute; top:0;
    transform:translateX(-50%);
    font:500 10px/1.2 'Inter',system-ui,sans-serif;
    letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.62);
    white-space:nowrap;
    text-align:center;
  }
  .gp-milestone-label.is-end{ transform:none; right:0; left:auto !important; text-align:right; }
  .gp-milestone-label.reached{ color:#bfe2ff; text-shadow:0 0 8px rgba(190,230,255,.5); }
  .gp-milestone-label small{ display:block; font-size:9px; opacity:.7; letter-spacing:.06em; margin-top:2px; }
  .gp-progress-labels{
    position:relative;
    height:32px;
    margin-top:10px;
  }
  .gp-progress-msg{
    margin:14px 0 0;
    font:500 12px/1.4 'Inter',system-ui,sans-serif;
    letter-spacing:.04em;
    color:rgba(255,255,255,.78);
    text-align:center;
  }
  .gp-progress-msg b{ color:#bfe2ff; font-weight:700; }

  /* Inline editor for entering nickname/URL on a social tile */
  .gp-soc-input{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    padding:8px;
    background:rgba(10,16,28,.94);
    border-radius:14px;
    z-index:6;
    border:1px solid rgba(190,230,255,.55);
    box-shadow:0 0 14px rgba(190,230,255,.35);
  }
  .gp-soc-input input{
    width:100%; box-sizing:border-box;
    font:500 11px/1.2 'Inter',system-ui,sans-serif;
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.30);
    border-radius:8px;
    padding:6px 8px;
    outline:none;
  }
  .gp-soc-input input:focus{ border-color:rgba(190,230,255,.85); background:rgba(0,0,0,.35); }
  .gp-soc-input-row{ display:flex; gap:6px; }
  .gp-soc-input-row button{
    flex:1;
    font:600 10px/1 'Inter',system-ui,sans-serif;
    letter-spacing:.08em; text-transform:uppercase;
    padding:6px 4px;
    border-radius:7px;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .gp-soc-save{ background:#bfe2ff; color:#0a1722; border:1px solid #bfe2ff; }
  .gp-soc-save:hover{ background:#fff; }
  .gp-soc-cancel{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.30); }
  .gp-soc-cancel:hover{ background:rgba(255,255,255,.20); }
  .gp-soc-wrap.has-handle .gp-soc{
    box-shadow:
      0 6px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 0 0 1px rgba(190,230,255,.30);
  }
  .gp-comm-head strong{ color:#bfe2ff; font-weight:800; text-shadow:0 0 8px rgba(190,230,255,.45); }
  .glass-panel .gp-close{
    position:absolute; top:10px; right:12px;
    width:34px; height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    font:300 22px/1 system-ui,sans-serif;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .glass-panel .gp-close:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.5);
  }
  @media (max-width: 720px){
    .glass-panel{ top:120px; padding:20px 22px 22px; border-radius:14px; }
    .glass-panel .gp-title{ font-size:17px; }
    .glass-panel .gp-body{ font-size:14px; }
  }

  /* === Glass chat window (draggable, fixed size) === */
  .glass-chat{
    position:fixed;
    top:120px; left:calc(100% - 420px);
    width:380px; height:640px;
    display:flex; flex-direction:column;
    color:#fff;
    background:rgba(20,22,30,.42);
    border:1px solid rgba(255,255,255,.22);
    border-radius:16px;
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:
      0 24px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.06);
    opacity:0;
    transform:translateY(-12px) scale(.98);
    pointer-events:none;
    transition:opacity .35s ease, transform .45s cubic-bezier(.22,.85,.25,1);
    z-index:20;
    overflow:hidden;
  }
  .glass-chat[data-open="1"]{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .glass-chat .gc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px;
    cursor:grab;
    user-select:none;
    background:rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .glass-chat .gc-head:active{ cursor:grabbing; }
  .glass-chat .gc-rh{ display:none; }
  .glass-chat .gc-title{
    font:600 12px/1 'Inter',system-ui,sans-serif;
    letter-spacing:.16em; text-transform:uppercase;
  }
  .glass-chat .gc-tools{ display:flex; gap:6px; }
  .glass-chat .gc-btn{
    width:28px; height:28px;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font:14px/1 system-ui,sans-serif;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .glass-chat .gc-btn:hover{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.42);
  }
  .glass-chat .gc-btn[aria-pressed="true"]{
    background:rgba(255,255,255,.28);
    border-color:rgba(255,255,255,.6);
  }
  .glass-chat .gc-log{
    flex:1; overflow-y:auto;
    padding:12px 14px;
    font:400 13px/1.45 'Inter',system-ui,sans-serif;
    color:rgba(255,255,255,.92);
  }
  .glass-chat .gc-msg{
    margin:0 0 8px;
    padding:7px 10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    word-wrap:break-word;
  }
  .glass-chat .gc-msg.is-me{
    background:rgba(120,170,255,.18);
    border-color:rgba(160,200,255,.32);
    margin-left:auto;
    max-width:88%;
  }
  .glass-chat .gc-msg .gc-meta{
    display:block;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.55;
    margin-bottom:2px;
  }
  .glass-chat .gc-input{
    display:flex; gap:8px; align-items:stretch;
    padding:10px;
    border-top:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);
  }
  .glass-chat .gc-ta-wrap{
    position:relative;
    flex:1;
    min-height:108px;
    height:108px;
    border-radius:10px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 0 0 1px rgba(255,255,255,.04);
  }
  .glass-chat .gc-input textarea{
    width:100%; height:100%;
    padding:8px 10px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    color:#fff;
    font:400 13px/1.35 inherit;
    outline:none;
    resize:none;
    overflow-y:hidden;
    transition:border-color .2s ease, background .2s ease;
    box-sizing:border-box;
  }
  .glass-chat .gc-input textarea:focus{
    border-color:rgba(255,255,255,.45);
    background:rgba(0,0,0,.35);
  }
  .glass-chat .gc-input textarea:focus::placeholder,
  .glass-chat .gc-input textarea:focus::-webkit-input-placeholder{ color:transparent; }
  .glass-chat .gc-trh,
  .glass-chat .gc-trh.n,
  .glass-chat .gc-trh.s,
  .glass-chat .gc-trh.e,
  .glass-chat .gc-trh.w,
  .glass-chat .gc-trh.ne,
  .glass-chat .gc-trh.nw,
  .glass-chat .gc-trh.se,
  .glass-chat .gc-trh.sw{ display:none !important; }
  .glass-chat .gc-trh::after,
  .glass-chat .gc-trh::before{ content:none !important; display:none !important; }
  .glass-chat .gc-ta-wrap{ position:relative; }
  .glass-chat .gc-send{
    padding:8px 14px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    color:#fff;
    font:600 11px/1 'Inter',system-ui,sans-serif;
    letter-spacing:.12em; text-transform:uppercase;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .glass-chat .gc-send:hover{
    background:rgba(255,255,255,.24);
    border-color:rgba(255,255,255,.5);
  }
  @media (max-width: 720px){
    .glass-chat{
      width:calc(100vw - 16px);
      height:min(70vh, calc(100vh - 90px));
      left:8px; right:auto; top:auto; bottom:10px;
      border-radius:14px;
      touch-action:none;
    }
    .glass-chat .gc-head{ touch-action:none; }
    /* Hide the connecting wire and the ring around Chatty button on mobile */
    .gc-wire{ display:none !important; }
  }

  /* === Wire connecting Chatty button to chat window === */
  .gc-wire{
    position:fixed; left:0; top:0;
    width:100vw; height:100vh;
    pointer-events:none;
    z-index:7;
    overflow:visible;
  }
  /* Glowing ring fades in together with the Chatty button reveal */
  #gcBtnRing, #gcBtnRingHalo{ opacity:0; transition:opacity .55s ease; }
  body.chatty-ready #gcBtnRing,
  body.chatty-ready #gcBtnRingHalo{ opacity:1; }

  /* "soon..." toast for placeholder click targets */
  .mh-soon-toast{
    position:fixed;
    transform:translate(-50%,-50%) scale(.92);
    z-index:9999;
    pointer-events:none;
    font:700 13px/1 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    letter-spacing:.18em; text-transform:lowercase;
    color:#ff5050;
    text-shadow:
      0 0 6px rgba(255,80,80,.55),
      0 0 14px rgba(255,30,30,.45),
      0 1px 2px rgba(0,0,0,.85);
    padding:6px 10px;
    border-radius:8px;
    background:rgba(20,4,4,.45);
    border:1px solid rgba(255,80,80,.45);
    backdrop-filter:blur(6px) saturate(140%);
    -webkit-backdrop-filter:blur(6px) saturate(140%);
    opacity:0;
    transition:opacity .18s ease, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .mh-soon-toast.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .mh-soon-toast.off{ opacity:0; transform:translate(-50%, -90%) scale(.96); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }