/* ══════════════════════════════════════════════════════════
   game-invite.css — 联机游戏邀请好友（game-invite.js）
   选好友面板 / 收到邀请的弹出卡片 / 私信里的邀请卡片
   颜色跟着各游戏大厅的主题色走（--gi-a / --gi-b）
   ══════════════════════════════════════════════════════════ */
.gi-mask{position:fixed;inset:0;z-index:11800;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;
  --gi-a:#ff8fb3;--gi-b:#b18cff;background:rgba(4,4,14,0);transition:background .2s;font-family:var(--font-body,system-ui)}
.gi-mask.show{background:rgba(4,4,14,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gi-sheet{width:min(440px,100%);max-height:min(620px,100%);display:flex;flex-direction:column;border-radius:22px;overflow:hidden;color:#f4effd;
  background:linear-gradient(180deg,rgba(28,22,56,.98),rgba(12,10,28,.98));border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--gi-a) 20%,transparent);
  opacity:0;transform:translateY(16px) scale(.97);transition:opacity .22s,transform .28s cubic-bezier(.2,.9,.3,1.1)}
.gi-mask.show .gi-sheet{opacity:1;transform:none}
.gi-mask.out .gi-sheet{opacity:0;transform:translateY(10px) scale(.98)}
.gi-hd{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
.gi-art{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gi-bg1,#2a1f5e),var(--gi-bg2,#0c0a20));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gi-a) 40%,transparent)}
.gi-art svg.gico{width:32px;height:32px}
.gi-hd-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gi-hd-tx b{font-size:1.02rem;font-weight:900;letter-spacing:.5px}
.gi-hd-tx span{font-size:.76rem;color:rgba(236,228,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-hd-tx code,.gi-pop code,.gi-card code{font:700 .78em ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.12em;color:var(--gi-a)}
.gi-x{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;display:grid;place-items:center;cursor:pointer}
.gi-x:hover{background:rgba(255,255,255,.14)}
.gi-x svg.ico{width:16px;height:16px}
.gi-search{display:flex;align-items:center;gap:8px;margin:0 16px 8px;height:40px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.gi-search:focus-within{border-color:color-mix(in srgb,var(--gi-a) 60%,transparent)}
.gi-search svg.ico{width:16px;height:16px;color:rgba(236,228,255,.5)}
.gi-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:inherit;font:inherit;font-size:.88rem}
.gi-search input::placeholder{color:rgba(236,228,255,.42)}
.gi-list{flex:1;min-height:120px;overflow-y:auto;padding:4px 10px 10px;overscroll-behavior:contain;scrollbar-width:thin}
.gi-sec{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 4px;font-size:.7rem;font-weight:700;letter-spacing:1px;color:rgba(236,228,255,.5)}
.gi-all{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gi-a) 45%,transparent);
  background:color-mix(in srgb,var(--gi-a) 14%,transparent);color:var(--gi-a);font:700 .7rem var(--font-body,system-ui);cursor:pointer}
.gi-all svg.ico{width:12px;height:12px}
.gi-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;transition:background .15s}
.gi-row:hover{background:rgba(255,255,255,.05)}
.gi-row.off .gi-av{filter:grayscale(.6);opacity:.75}
.gi-av{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:visible;
  background:linear-gradient(135deg,#ff8fb3,#8b5cf6);color:#fff;font-weight:800}
.gi-av > span,.gi-av > img{border-radius:50%}
.gi-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.gi-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#64748b;border:2px solid #16122e}
.gi-dot.on{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6)}
.gi-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gi-nm b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-nm > span{font-size:.72rem;color:rgba(236,228,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-nm i{font-style:normal}
.gi-nm i.on{color:#86efac}
.gi-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;min-width:64px;padding:0 14px;border-radius:10px;border:0;cursor:pointer;
  font:800 .8rem var(--font-body,system-ui);color:#1a1206;background:linear-gradient(135deg,#fff3dc,var(--gi-a) 60%,var(--gi-b));
  box-shadow:0 6px 16px color-mix(in srgb,var(--gi-a) 30%,transparent);transition:transform .12s,filter .15s,opacity .15s}
.gi-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.gi-btn:active:not(:disabled){transform:scale(.96)}
.gi-btn:disabled{cursor:default;opacity:.7}
.gi-btn svg.ico{width:14px;height:14px}
.gi-btn.done{background:rgba(74,222,128,.14);color:#86efac;box-shadow:inset 0 0 0 1px rgba(74,222,128,.35);opacity:1}
.gi-btn.ghost{background:rgba(255,255,255,.08);color:#f4effd;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.gi-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 20px;text-align:center;font-size:.8rem;color:rgba(236,228,255,.55);line-height:1.6}
.gi-empty svg.ico{width:36px;height:36px;color:var(--gi-a);opacity:.7}
.gi-empty b{font-size:.92rem;color:#f4effd}
.gi-loading{display:flex;justify-content:center;gap:6px;padding:40px 0}
.gi-loading i{width:8px;height:8px;border-radius:50%;background:var(--gi-a);animation:giDot 1s ease-in-out infinite}
.gi-loading i:nth-child(2){animation-delay:.15s}.gi-loading i:nth-child(3){animation-delay:.3s}
@keyframes giDot{50%{transform:translateY(-6px);opacity:.4}}
.gi-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.07);font-size:.7rem;color:rgba(236,228,255,.5)}
.gi-ft > span{display:flex;align-items:center;gap:5px;min-width:0}
.gi-ft svg.ico{width:13px;height:13px;flex:0 0 auto}
.gi-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:#f4effd;font:700 .74rem var(--font-body,system-ui);cursor:pointer}
.gi-link:hover{background:rgba(255,255,255,.12)}
@media (max-width:560px){
  .gi-mask{align-items:flex-end;padding:0}
  .gi-sheet{width:100%;max-height:82vh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .gi-ft{flex-direction:column;align-items:stretch;text-align:center}
  .gi-ft > span{justify-content:center}
  .gi-link{justify-content:center;height:38px}
}

/* ══ 收到邀请的弹出卡片 ══ */
#gi-pops{position:fixed;right:18px;bottom:18px;z-index:11900;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px));pointer-events:none;font-family:var(--font-body,system-ui)}
.gi-pop{position:relative;pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:10px;padding:14px 14px 16px;
  border-radius:18px;overflow:hidden;color:#f4effd;--gi-a:#ff8fb3;--gi-b:#b18cff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gi-bg1,#2a1f5e) 92%,#000),rgba(12,10,28,.97));
  border:1px solid color-mix(in srgb,var(--gi-a) 35%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--gi-a) 16%,transparent);
  animation:giIn .45s cubic-bezier(.2,.9,.3,1.2)}
.gi-pop.out{animation:giOut .26s ease forwards}
@keyframes giIn{from{opacity:0;transform:translateX(30px) scale(.96)}}
@keyframes giOut{to{opacity:0;transform:translateX(24px) scale(.97)}}
.gi-pop-art{grid-row:1;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gi-a) 35%,transparent)}
.gi-pop-art svg.gico{width:38px;height:38px;animation:giWiggle 2.4s ease-in-out infinite}
@keyframes giWiggle{0%,70%,100%{transform:none}78%{transform:rotate(-8deg) scale(1.06)}86%{transform:rotate(6deg) scale(1.06)}}
.gi-pop-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.gi-pop-from{display:flex;align-items:center;gap:6px;font-size:.74rem;color:rgba(236,228,255,.7);min-width:0}
.gi-pop-from b{color:#fff;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-pop-av{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff8fb3,#8b5cf6)}
.gi-pop-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gi-pop-game{font-size:1.15rem;font-weight:900;letter-spacing:1px}
.gi-pop-meta{font-size:.72rem;color:rgba(236,228,255,.55)}
.gi-pop-act{grid-column:1 / 3;display:flex;gap:8px}
.gi-pop-act .gi-btn{flex:1;height:36px}
.gi-pop-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--gi-a),var(--gi-b));animation:giBar linear forwards}
.gi-pop.hold .gi-pop-bar{animation-play-state:paused}
@keyframes giBar{to{transform:scaleX(0)}}
@media (max-width:560px){
  #gi-pops{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));bottom:auto;width:auto}
  @keyframes giIn{from{opacity:0;transform:translateY(-20px) scale(.97)}}
  .gi-pop.out{animation-name:giOutUp}
  @keyframes giOutUp{to{opacity:0;transform:translateY(-16px)}}
}

/* ══ 私信里的邀请卡片 ══ */
.gi-card{display:inline-flex;align-items:center;gap:12px;min-width:230px;max-width:300px;padding:10px 12px;border-radius:16px;vertical-align:middle;text-align:left;
  --gi-a:#ff8fb3;--gi-b:#b18cff;color:#f4effd;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gi-bg1,#2a1f5e) 88%,#000),rgba(14,12,32,.96));
  border:1px solid color-mix(in srgb,var(--gi-a) 35%,transparent);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.gi-card-art{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(0,0,0,.25)}
.gi-card-art svg.gico{width:32px;height:32px}
.gi-card-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
.gi-card-tx i{font-style:normal;font-size:.64rem;letter-spacing:1px;color:var(--gi-a)}
.gi-card-tx b{font-size:.95rem;font-weight:900}
.gi-card-tx span{font-size:.7rem;color:rgba(236,228,255,.55)}
.gi-card .gi-btn{height:30px;min-width:56px;padding:0 12px}

@media (prefers-reduced-motion:reduce){
  .gi-sheet,.gi-pop,.gi-pop.out,.gi-pop-art svg.gico,.gi-loading i{animation:none;transition:none}
}

/* 私信气泡里：时间挪到卡片下面，别压住「加入」按钮 */
.im-bubble.media:has(.gi-card){background:transparent!important;box-shadow:none!important}
.im-bubble.media:has(.gi-card) .im-stamp{position:static;display:block;float:none;margin:4px 6px 0 auto;width:max-content;padding:0;background:none;color:rgba(236,228,255,.5);backdrop-filter:none;-webkit-backdrop-filter:none}