:root{
    --bg0:#050612;
    --bg1:#070a1c;
    --panel: rgba(12,16,48,.86);
    --panel2: rgba(10,13,36,.86);
    --stroke: rgba(255,255,255,.08);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.62);
    --brand: #6aa7ff;
    --brand2:#9b7bff;
    --danger:#ff5477;
    --shadow: 0 16px 44px rgba(0,0,0,.45);
    --r: 14px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--text);
    font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:
      radial-gradient(1000px 600px at 20% 10%, rgba(155,123,255,.20), transparent 60%),
      radial-gradient(900px 700px at 80% 30%, rgba(106,167,255,.16), transparent 58%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
    overflow:hidden;
  }
  
  #bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
  .hidden{display:none!important}
  
  /* Buttons / Inputs */
  .btn{
    all:unset;
    cursor:pointer;
    padding:10px 12px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    text-align:center;
    user-select:none;
  }
  .btn:hover{background: rgba(255,255,255,.05)}
  .btn.ghost{background:transparent}
  .btn.danger{
    border-color: rgba(255,84,119,.35);
    background: rgba(255,84,119,.10);
  }
  .btn.primary{
    border-color: rgba(106,167,255,.30);
    background: linear-gradient(90deg, rgba(155,123,255,.22), rgba(106,167,255,.12));
  }
  
  .inp{
    width:100%;
    padding:10px 12px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--text);
    outline:none;
  }
  .inp:focus{border-color: rgba(106,167,255,.40); box-shadow: 0 0 0 3px rgba(106,167,255,.10);}
  .lbl{display:block;margin:10px 0 6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .err{min-height:18px;color:var(--danger);font-size:12px;margin-top:8px}
  
  .row{display:flex;gap:10px;align-items:center;margin-top:10px}
  
  /* Auth / Wait */
  .auth{
    position:fixed;
    inset:0;
    z-index:2;
    display:grid;
    place-items:center;
    padding:24px;
  }
  .auth-card{
    width:min(520px, 100%);
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(8,10,28,.76);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    padding:16px;
  }
  .auth-title{font-weight:900;letter-spacing:.22em;text-transform:uppercase}
  .auth-sub{color:var(--muted);margin-top:6px;margin-bottom:12px}
  .auth-tabs{display:flex;gap:8px;margin:10px 0 12px}
  .tab{
    all:unset;cursor:pointer;flex:1;text-align:center;
    padding:10px 12px;border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
  }
  .tab.active{border-color: rgba(155,123,255,.35); background: rgba(155,123,255,.10);}
  .auth-foot{margin-top:12px;color:rgba(255,255,255,.35);font-size:12px}
  
  /* =========================
     Title Screen (clean + reliable)
  ========================= */
  .title-screen{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    pointer-events: auto;
  
    background:
      radial-gradient(1000px 600px at 20% 10%, rgba(155,123,255,.22), transparent 60%),
      radial-gradient(900px 700px at 80% 30%, rgba(106,167,255,.18), transparent 58%),
      rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
  
    transition: opacity 420ms ease, transform 420ms ease;
  }
  .title-screen.fade-out{
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
  }
  .title-inner{ text-align:center; padding: 24px; }
  
  /* Fallback visible text ALWAYS (no -webkit-text-fill-color tricks) */
  .title-huge{
    font-weight: 1000;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-size: clamp(64px, 10vw, 160px);
    line-height: 1;
    margin: 0;
    color: rgba(255,255,255,.96);
    text-shadow:
      0 0 22px rgba(155,123,255,.20),
      0 0 40px rgba(106,167,255,.14);
  }
  
  /* Optional animated gradient layer (safe: uses pseudo-element) */
  .title-huge.glow{
    position: relative;
    display: inline-block;
  }
  .title-huge.glow::after{
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: transparent;
    background: linear-gradient(90deg, rgba(155,123,255,1), rgba(106,167,255,1), rgba(155,123,255,1));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .95;
    filter:
      drop-shadow(0 0 14px rgba(120,60,230,.20))
      drop-shadow(0 0 44px rgba(40,170,255,.14));
    animation: titleShimmer 2.4s ease-in-out infinite;
  }
  @keyframes titleShimmer{
    0%   { background-position: 0% 50%; transform: translateY(0); }
    50%  { background-position: 100% 50%; transform: translateY(-2px); }
    100% { background-position: 0% 50%; transform: translateY(0); }
  }
  
  .title-sub{ margin-top: 10px; color: rgba(255,255,255,.62); }
  .title-btn{ margin-top: 18px; padding: 12px 16px; }
  .title-hint{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.35); }
  
  /* App shell */
  .app{
    position:relative;
    z-index:1;
    height:100%;
    display:grid;
    grid-template-columns: 260px 1fr;
  }
  
  .side{
    background: linear-gradient(180deg, var(--panel), var(--panel2));
    border-right: 1px solid var(--stroke);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap: 12px;
    min-width: 240px;
    backdrop-filter: blur(10px);
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--stroke);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
  }
  
  .logo{
    width:34px;height:34px;
    border-radius:10px;
    background: radial-gradient(circle at 30% 30%, var(--brand2), var(--brand));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 24px rgba(106,167,255,.18);
  }
  .brand-title{font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
  .brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
  
  .nav{display:flex;flex-direction:column;gap:6px}
  .nav-btn{
    all:unset;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius: 12px;
    border:1px solid transparent;
    color:var(--text);
    user-select:none;
  }
  .nav-btn:hover{background: rgba(255,255,255,.04);border-color: rgba(255,255,255,.07);}
  .nav-btn.active{
    background: linear-gradient(90deg, rgba(155,123,255,.18), rgba(106,167,255,.10));
    border-color: rgba(155,123,255,.25);
  }
  .nav-btn .ico{width:22px;text-align:center;opacity:.9}
  
  .side-footer{
    margin-top:auto;
    padding-top:12px;
    border-top:1px solid var(--stroke);
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .user{display:flex;align-items:center;gap:10px}
  .avatar{
    width:34px;height:34px;border-radius:12px;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
  }
  .user .name{font-weight:700}
  .user .role{font-size:12px;color:var(--muted)}
  .side-actions{display:flex;gap:10px}
  
  .main{
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    min-height:0;
  }
  .top{
    height:58px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid var(--stroke);
    background: rgba(8,10,28,.70);
    backdrop-filter: blur(10px);
  }
  .search{
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    min-width: 160px;
  }
  .search .ico{opacity:.7}
  .search input{all:unset;width:100%;color:var(--text);}
  .search input::placeholder{color:rgba(255,255,255,.45)}
  .actions{display:flex;gap:10px;align-items:center}
  .content{padding:14px;overflow:auto;min-height:0}
  
  .hero{
    padding:14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--r);
    background:
      radial-gradient(900px 380px at 15% 10%, rgba(155,123,255,.18), transparent 60%),
      radial-gradient(900px 380px at 75% 30%, rgba(106,167,255,.12), transparent 60%),
      rgba(255,255,255,.03);
    box-shadow: var(--shadow);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
  }
  .hero h1{margin:0 0 6px;font-size:16px}
  .hero p{margin:0;color:var(--muted);max-width:75ch}
  
  .grid{
    margin-top:12px;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
  }
  
  .card{
    grid-column: span 4;
    border-radius: var(--r);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding:12px;
    min-width:0;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  .card.clickable{cursor:pointer}
  .card.clickable:hover{border-color: rgba(106,167,255,.30);background: rgba(255,255,255,.04);}
  .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .card-title{font-weight:800}
  .card-right{color:rgba(255,255,255,.55);font-size:12px;white-space:nowrap}
  .card-desc{margin-top:6px;color:var(--muted);font-size:12px}
  
  .panel{
    margin-top:12px;
    border-radius: var(--r);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    padding:12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.30);
  }
  .panel-title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.85)}
  .hint{margin-top:10px;color:rgba(255,255,255,.45);font-size:12px}
  .kv{display:grid;grid-template-columns:120px 1fr;gap:8px;margin-top:10px}
  .k{color:rgba(255,255,255,.55);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
  .v{word-break:break-all;color:rgba(255,255,255,.85)}
  
  /* Chat */
  .chat-shell{
    margin-top:12px;
    height: min(72vh, 720px);
    display:flex;
    flex-direction:column;
    border-radius: var(--r);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 28px rgba(0,0,0,.30);
    overflow:hidden;
  }
  .chat-header{
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  .chat-title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
  .chat-sub{color:rgba(255,255,255,.45);font-size:12px;margin-top:2px}
  
  .chat-log{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  /* 2-column grid: avatar + content */
  .msg{
    display:grid;
    grid-template-columns: 44px 1fr;
    column-gap: 10px;
    align-items:start;
  }
  .msg-ava{
    width:34px;height:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    border:1px solid rgba(255,255,255,.10);
    margin-top:2px;
  }
  .msg.grouped .msg-ava{ visibility:hidden; }
  .msg.grouped .msg-head{ display:none; }
  
  .msg-body{min-width:0}
  .msg-head{
    display:flex;
    gap:10px;
    align-items:baseline;
    margin-bottom:2px;
  }
  .msg-user{font-weight:900}
  .msg-text{
    color:rgba(255,255,255,.88);
    word-break:break-word;
    white-space:pre-wrap;
    line-height:1.35;
  }
  .msg.mine .msg-user{color: rgba(155,123,255,.95)}
  .msg.grouped{margin-top:-2px}
  
  .chat-inputbar{
    flex:0 0 auto;
    display:flex;
    gap:10px;
    padding:12px;
    border-top:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  .chat-inp{flex:1}
  .chat-send{flex:0 0 auto}
  
  /* Vault overlay viewer */
  .vault-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    background:#000;
    height:100vh;
    overflow:hidden;
  }
  .vault-topbar{
    height:54px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background: rgba(8,10,28,.88);
    backdrop-filter: blur(10px);
  }
  .vault-title{
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:12px;
  }
  .vault-actions{display:flex;gap:10px;align-items:center}
  #vaultFrame{
    flex:1 1 auto;
    border:0;
    width:100%;
    min-height:0;
    background:#000;
  }
  
  /* Vault grid sizing */
  #gameGrid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  #gameGrid .card{grid-column:auto;padding:10px}
  .game-cover{
    margin-top:10px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
  }
  .game-cover img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
  
  /* Responsive */
  @media (max-width: 920px){
    .app{grid-template-columns:72px 1fr;}
    .brand .meta, .user .meta, .nav-btn .label{display:none;}
    .nav-btn{justify-content:center}
    .card{grid-column:span 6}
  }
  @media (max-width: 620px){
    .row{flex-direction:column;align-items:stretch}
    .card{grid-column:span 12}
    .chat-shell{height:min(76vh, 720px)}
  }
/* ===== Hard stacking fix (title above background) ===== */
/* ===== Hard stacking fix (title above background) ===== */
#bg-canvas{
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  
  #auth{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2 !important;
  }
  
  #titleScreen{
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    place-items: center !important;
  }
  
  #titleScreen .title-inner{
    position: relative !important;
    z-index: 100000 !important;
  }
/* ===== Home "STELLAR" hero title ===== */
.hero-home{display:flex;flex-direction:column;gap:8px}

.hero-stellar{
  font-weight: 1000;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  margin: 0;
  color: rgba(255,255,255,.95);
  text-shadow:
    0 0 18px rgba(155,123,255,.18),
    0 0 34px rgba(106,167,255,.12);
}

/* Optional animated gradient overlay (same safe technique as title screen) */
.hero-stellar.glow{
  position: relative;
  display: inline-block;
}
.hero-stellar.glow::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background: linear-gradient(90deg, rgba(155,123,255,1), rgba(106,167,255,1), rgba(155,123,255,1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .95;
  filter:
    drop-shadow(0 0 12px rgba(120,60,230,.18))
    drop-shadow(0 0 36px rgba(40,170,255,.12));
  animation: titleShimmer 2.4s ease-in-out infinite; /* reuses your existing keyframes */
}

.hero-sub{color: rgba(255,255,255,.70)}
.hero-tip{color: rgba(255,255,255,.55)}

/* Hide the default view description on Home (we use tooltips instead) */
#viewDesc{display:none;}
/* Only hide the view description line in the Home hero */
#homeHero #viewDesc{display:none;}
.chan-btn{
    all:unset;
    cursor:pointer;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .chan-btn:hover{background: rgba(255,255,255,.04)}
  .chan-btn.active{border-color: rgba(155,123,255,.28); background: rgba(155,123,255,.10)}
  .chan-name{font-weight:900}
  .msg-actions{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .react{
    all:unset;
    cursor:pointer;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    font-size:12px;
  }
  .react:hover{background: rgba(255,255,255,.06)}
  .del{
    all:unset;
    cursor:pointer;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,84,119,.28);
    background: rgba(255,84,119,.10);
    font-size:12px;
  }
/* ===== Modal ===== */
.modal{
    position: fixed;
    inset: 0;
    z-index: 100000; /* above title + vault */
  }
  .modal-backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
  }
  .modal-card{
    position: relative;
    margin: 12vh auto 0;
    width: min(420px, calc(100% - 32px));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,10,28,.92);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    padding: 14px;
  }
  .modal-title{
    font-weight: 1000;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 12px;
  }
  .modal-desc{margin-top:8px;color: rgba(255,255,255,.55)}
  .modal-actions{
    margin-top: 14px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }