/* 分享弹窗。四个页面（新闻 / 比赛 / 球员 / 球队抽屉）共用这一份。
   层级压在球员抽屉（82）之上：从抽屉里点分享，弹窗要盖住抽屉。 */
/* 时长和曲线走 site.css 的全站变量：打开是 --t-slow 的「落定」，关上是 --t-base 的「收走」，
   和右侧抽屉、手机导航同一个节奏。share.js 里藏弹窗的延时（240ms）要不短于关上的时长。 */
.shr-scrim{position:fixed;inset:0;z-index:90;background:rgba(18,0,22,.62);opacity:0;pointer-events:none;
  transition:opacity var(--t-base,.22s) ease}
.shr-scrim.on{opacity:1;pointer-events:auto}
.shr{position:fixed;z-index:91;left:50%;top:50%;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 32px);
  transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;
  transition:opacity var(--t-base,.22s) ease,transform var(--t-base,.22s) cubic-bezier(.4,0,.7,.2);
  background:var(--paper,#fff);color:var(--ink,#1c0a20);border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);box-shadow:0 30px 80px rgba(20,0,24,.45)}
.shr[hidden]{display:none}
.shr.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);
  transition:opacity var(--t-base,.22s) ease,transform var(--t-slow,.34s) var(--ease-out,ease-out)}
.shr-view{background:#1a0020;display:flex;align-items:center;justify-content:center;padding:22px;min-height:340px;position:relative}
/* 浅色卡预览在浅灰台面上，深底上看不出浅色卡的边 */
.shr-view.light{background:#ebe6ee}
.shr-view.light img{box-shadow:0 12px 40px rgba(55,0,60,.18)}
.shr-view.light .shr-wait{color:var(--ink-3,#6e6376)}
.shr-view img{display:block;max-width:100%;max-height:calc(100vh - 120px);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.45);
  opacity:0;transform:scale(.985);transition:opacity var(--t-slow,.34s) ease,transform var(--t-slow,.34s) var(--ease-out,ease-out)}
.shr-view img.ok{opacity:1;transform:none}
/* 深色 / 浅色预览台面来回切时底色渐变，不是一下子跳色 */
.shr-view{transition:background-color var(--t-slow,.34s) ease}
.shr-view.tall img{max-height:min(560px,calc(100vh - 120px))}
.shr-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:rgba(255,255,255,.7);font-size:13px;font-weight:600}
.shr-wait[hidden]{display:none}
/* 加载动画的样子在 site.css 的 .mpl，这里只定大小 */
.shr-wait>i{display:block}
.shr-wait .mpl{--w:96px}
@media (prefers-reduced-motion:reduce){.shr,.shr-scrim,.shr-view img{transition:none}}
.shr-side{padding:22px 22px 20px;display:flex;flex-direction:column;gap:16px;overflow:auto}
.shr-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.shr-hd h2{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0}
.shr-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#e9e5eb);background:none;cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink-2,#4a3f50)}
.shr-x:hover{border-color:var(--plum,#37003c);color:var(--plum,#37003c)}
.shr-seg{display:flex;gap:8px;flex-wrap:wrap}
.shr-tg{display:inline-flex;border:1px solid var(--line,#e9e5eb);border-radius:999px;padding:3px}
.shr-tg button{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;
  border-radius:999px;color:var(--ink-3,#6e6376);
  transition:background-color var(--t-base,.22s) var(--ease-out,ease-out),color var(--t-fast,.14s)}
.shr-tg button[aria-pressed="true"]{background:var(--plum,#37003c);color:#fff}
.shr-link{display:flex;border:1px solid var(--line,#e9e5eb);border-radius:8px;overflow:hidden}
.shr-link input{flex:1;min-width:0;border:0;padding:10px 12px;font:inherit;font-size:13px;color:var(--ink-2,#4a3f50);background:var(--paper-2,#f6f4f7)}
.shr-link button{border:0;border-left:1px solid var(--line,#e9e5eb);background:#fff;font:inherit;font-size:12.5px;font-weight:800;
  padding:0 14px;cursor:pointer;color:var(--plum,#37003c);white-space:nowrap}
.shr-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shr-act{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:800;border:1px solid var(--line,#e9e5eb);background:#fff;color:var(--ink,#1c0a20);
  transition:border-color var(--t-fast,.14s),background-color var(--t-fast,.14s)}
.shr-act.pri{background:var(--plum,#37003c);border-color:var(--plum,#37003c);color:#fff}
.shr-act:hover{border-color:var(--plum,#37003c)}
.shr-act[disabled]{opacity:.45;cursor:default}
.shr-act svg{width:16px;height:16px;flex:none}
.shr-lab{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,#6e6376)}
.shr-plats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shr-plat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;background:none;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2,#4a3f50);text-decoration:none;
  transition:border-color var(--t-fast,.14s),background-color var(--t-fast,.14s)}
.shr-plat span.ic{transition:transform var(--t-base,.22s) var(--ease-spring,ease-out)}
.shr-plat:hover span.ic{transform:scale(1.08)}
.shr-plat:hover{border-color:var(--line,#e9e5eb);background:var(--paper-2,#f6f4f7)}
.shr-plat span.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff}
.shr-plat svg{width:19px;height:19px;fill:currentColor}
.shr-qr{display:none;gap:14px;align-items:center;padding:12px;border-radius:10px;background:var(--paper-2,#f6f4f7)}
.shr-qr.on{display:flex}
.shr-qr img{width:116px;height:116px;image-rendering:pixelated;background:#fff;padding:6px;border-radius:6px;flex:none}
.shr-qr p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2,#4a3f50)}
.shr-toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:#1c0a20;color:#fff;font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;
  transition:opacity var(--t-base,.22s) ease,transform var(--t-slow,.34s) var(--ease-out,ease-out)}
.shr-toast.on{opacity:1;transform:translate(-50%,0)}
/* 页面上的分享按钮：和各页现有按钮同一个外形，只补图标 */
.shr-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit}
.shr-btn svg{width:15px;height:15px;flex:none}
/* 球队抽屉标题块里的分享：和「关注」按钮同高的圆形图标钮，深底上半透明 */
.dr-share{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.dr-share:hover{background:rgba(255,255,255,.2);border-color:#fff}
.dr-share:focus-visible{outline:2px solid #00e0c6;outline-offset:2px}
.dr-share svg{width:15px;height:15px}
.dr-share span:empty{display:none}
@media (max-width:760px){
  .shr{grid-template-columns:1fr;top:auto;bottom:0;left:0;width:100%;max-height:92vh;border-radius:16px 16px 0 0;
    transform:translateY(12px)}
  .shr.on{transform:none}
  .shr-view{min-height:0;padding:16px}
  .shr-view img,.shr-view.tall img{max-height:38vh}
  .shr-plats{grid-template-columns:repeat(4,1fr)}
}