/* 进群弹窗(2026-10-28 老板选 A「派对组局」,设计稿 output/群组弹窗设计/concept-A.png)
 * 近黑卡片 + 柠檬霓虹边和外光,上面是派对插画(底边已经淡进黑色),× 压在插画右上角;
 * 白色粗标题、灰副标题、两条深色圆角行(图标 · 细柠檬竖线 · 柠檬小标题 + 灰说明)、柠檬胶囊主按钮、纯文字次按钮。
 * 逻辑在 group-invite.js;用 <dialog> showModal,底下的大厅自动不可点。
 * 320×568 到 430×932 都放得下:高度不够时插画先缩(裁掉上下),再不够才让卡片自己滚。
 */
html.ginv-open { overflow: hidden; }

.ginv {
  --ginv-neon: #e5ff3d;
  --ginv-card: #0c0d0e;
  --ginv-glow: 0 0 0 1px rgba(229, 255, 61, .3), 0 0 18px rgba(229, 255, 61, .55), 0 0 56px rgba(229, 255, 61, .2);
  box-sizing: border-box;
  position: fixed;
  inset: var(--safe-t, 0px) 0 var(--safe-b, 0px);
  width: min(400px, calc(100% - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100% - var(--safe-t, 0px) - var(--safe-b, 0px) - 24px);
  margin: auto;
  padding: 0;
  border: 2px solid var(--ginv-neon);
  border-radius: 26px;
  background: radial-gradient(120% 60% at 50% 100%, #15171a 0%, var(--ginv-card) 70%);
  color: #fff;
  font-family: var(--sans, system-ui, -apple-system, "PingFang SC", sans-serif);
  box-shadow: var(--ginv-glow);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  container-type: inline-size;
}
.ginv::-webkit-scrollbar { display: none; }
.ginv[open] { display: flex; flex-direction: column; }
dialog.ginv:focus, dialog.ginv:focus-visible { outline: none !important; } /* 打开时焦点放在整张卡上(读屏先念标题),不画框 */
/* 霓虹管往里透的那一圈光:盖在插画上面,不挡点击 */
.ginv::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 16px rgba(229, 255, 61, .2), inset 0 0 2px rgba(229, 255, 61, .5);
}
.ginv::backdrop { background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 很旧的 WebView 没有 <dialog>:当普通固定层;遮罩是 JS 补在卡片前面的一层真元素(点得到,点了算「下次再说」),底下的大厅设成 inert */
.ginv.is-fallback { z-index: 31; }
.ginv-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }

/* ---------- 插画 ---------- */
.ginv-hero { position: relative; flex: 0 1 auto; min-height: 96px; aspect-ratio: 1080 / 806; overflow: hidden; }
.ginv-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ginv-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none; background: linear-gradient(180deg, rgba(12, 13, 14, 0) 0%, rgba(12, 13, 14, .85) 72%, var(--ginv-card) 100%); }

.ginv-x {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: #f2ffa8; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ginv-x::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: rgba(0, 0, 0, .74); box-shadow: inset 0 0 0 2px var(--ginv-neon), 0 0 10px rgba(229, 255, 61, .45); }
.ginv-x svg { position: relative; width: 18px; height: 18px; }

/* ---------- 文字和两条卖点 ---------- */
.ginv-body { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; margin-top: -20px; padding: 0 16px 8px; text-align: center; }
.ginv-title {
  margin: 0; color: #fff; font-family: inherit;
  font-size: clamp(19px, 6.4vw, 27px); font-size: clamp(19px, 7.3cqi, 28px);
  font-weight: 900; line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .7);
  overflow-wrap: anywhere;
}
.ginv-sub { margin: 6px 0 0; color: #b4b4b4; font-size: 15px; font-size: clamp(14px, 4.6cqi, 17px); line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.ginv-perks { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.ginv-perk {
  display: flex; align-items: center; gap: 10px; min-height: 78px; padding: 8px 14px 8px 8px;
  border-radius: 16px; background: linear-gradient(180deg, #17181b 0%, #111214 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); text-align: start;
}
.ginv-perk > img { flex: none; width: 72px; height: 72px; margin: -2px 0; object-fit: contain; }
.ginv-perk-copy { position: relative; display: grid; gap: 2px; min-width: 0; padding-left: 14px; }
.ginv-perk-copy::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--ginv-neon); box-shadow: 0 0 8px rgba(229, 255, 61, .55); }
.ginv-perk-copy > b { color: var(--ginv-neon); font-size: 18px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.ginv-perk-copy > span { color: #a8a8a8; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; text-wrap: pretty; }
/* 中文只在标点处折行:「…射龙门，」/「随时约人一起玩」,不会把「随时」拆到两行 */
html:lang(zh) :is(.ginv-sub, .ginv-perk-copy > span) { word-break: keep-all; }

/* ---------- 按钮 ---------- */
.ginv-join {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin-top: 20px; padding: 10px 20px;
  border: 0; border-radius: 999px; background: linear-gradient(180deg, #f2ff7c 0%, #e5ff3d 50%, #d7f02d 100%);
  color: #0a0a0a; font: 800 18px/1.25 var(--sans, system-ui, sans-serif); font-size: clamp(17px, 5.4cqi, 20px); letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 0 22px rgba(229, 255, 61, .42), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-tap-highlight-color: transparent;
}
.ginv-join span { min-width: 0; overflow-wrap: anywhere; }
.ginv-plane { flex: none; width: 22px; height: 22px; }
.ginv-later {
  align-self: center; min-width: 140px; min-height: 44px; margin-top: 4px; padding: 8px 16px;
  border: 0; border-radius: 999px; background: none; color: #d4d4d4; font: 600 15px/1.3 var(--sans, system-ui, sans-serif); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%; overflow-wrap: anywhere;
}
.ginv-later:hover { color: #fff; }
.ginv-join:focus-visible, .ginv-later:focus-visible, .ginv-x:focus-visible { outline: 2px solid var(--ginv-neon) !important; outline-offset: 3px !important; }
.ginv-join:focus-visible { outline-color: #fff !important; }

/* 窄屏(320–360 宽):图标和留白收一点,说明那一栏至少放得下 11 个中文字(「射龙门，随时约人一起玩」「群里不定时派发惊喜红包」各一行) */
@media (max-width: 360px) {
  .ginv-body { padding-inline: 14px; }
  .ginv-perk { gap: 8px; padding: 6px 10px 6px 6px; }
  .ginv-perk > img { width: 56px; height: 56px; margin: 0; }
  .ginv-perk-copy { padding-left: 12px; }
  .ginv-perk-copy > b { font-size: 17px; }
}
/* 矮屏(SE、拔掉键盘的小安卓):卖点行和按钮收紧一点,插画先缩 */
@media (max-height: 720px) {
  .ginv-perks { gap: 8px; margin-top: 12px; }
  .ginv-perk { min-height: 66px; padding-block: 6px; }
  .ginv-perk > img { width: 58px; height: 58px; }
  .ginv-join { min-height: 48px; margin-top: 14px; }
  .ginv-later { margin-top: 0; }
}
/* 特别矮(320×568 这一级):字和间距再收一点,插画少裁一些 */
@media (max-height: 620px) {
  .ginv-body { margin-top: -16px; }
  .ginv-sub { margin-top: 4px; font-size: 14px; }
  .ginv-perk-copy > span { font-size: 13px; line-height: 1.4; }
  .ginv-join { margin-top: 12px; }
}
/* 缅文、孟加拉文字高、行距大:标题和说明不挤 */
html:is(:lang(my), :lang(bn)) .ginv-title { line-height: 1.45; font-family: system-ui, -apple-system, var(--locale-font, sans-serif); } /* 标题里的 PartyAnimal 用系统字的粗体,缅文 / 孟加拉文字体的拉丁字母没有粗体 */
html:is(:lang(my), :lang(bn)) .ginv-perk-copy > b { line-height: 1.5; }
html:is(:lang(my), :lang(bn)) .ginv-perk-copy > span { line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .ginv[open] { animation: ginv-in .34s cubic-bezier(.2, .8, .3, 1) both; }
  .ginv[open]::backdrop, .ginv-scrim { animation: ginv-fade .28s ease-out both; }
}
@keyframes ginv-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ginv-fade { from { opacity: 0; } to { opacity: 1; } }