/* ═══════════════════════════════════════════════════════════════════════
   Mognota hub — share button on each game card + the share card (game-share.js).
   Arcade look: soft translucent disc, bold Inter, gold = the main action.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The share button lives INSIDE the opened game card only; the closed tile stays clean ── */
.game-card:not(.is-open) .gc-share{display:none}

/* base look (used by the open card below) */
.gc-share{
  position:absolute;top:10px;right:10px;z-index:4;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(0,0,0,.38);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:background .15s,transform .12s;
}
.gc-share::after{content:'';position:absolute;inset:-6px;border-radius:50%} /* bigger tap area */
.gc-share svg{width:16px;height:16px}
.gc-share:hover{background:rgba(0,0,0,.6);transform:scale(1.08)}
.gc-share:active{transform:scale(.94)}
.gc-share:focus-visible{outline:2px solid #ffb627;outline-offset:2px}

/* ── In the open detail card (phone sheet / desktop popup): sits left of the × button ── */
.game-card.gc-locked .gc-share{display:none}
.game-card.is-open .gc-share{
  top:14px;right:58px;width:32px;height:32px;
  background:var(--sheet-close-bg,rgba(255,255,255,.08));color:var(--text,#fff);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
.game-card.is-open .gc-share:hover{background:var(--sheet-close-bg,rgba(255,255,255,.14));filter:brightness(1.25)}
@media (hover:hover) and (pointer:fine){
  .game-card.is-open .gc-share{top:16px;right:60px}
}
.games-grid .game-card.is-open .game-card-title{padding-right:80px}

/* ── The share card ── */
.gsh-ov{
  position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;
  background:rgba(2,5,14,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background .22s,backdrop-filter .22s,-webkit-backdrop-filter .22s;
}
.gsh-ov.show{background:rgba(2,5,14,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.gsh-card{
  position:relative;width:100%;max-width:400px;box-sizing:border-box;padding:22px 20px 20px;
  background:#141416;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--gsh-c1,#334155) 28%,transparent);
  font-family:Inter,system-ui,sans-serif;
  transform:translateY(14px) scale(.96);opacity:0;transition:transform .26s cubic-bezier(.2,1.2,.4,1),opacity .2s;
}
.gsh-ov.show .gsh-card{transform:none;opacity:1}
.gsh-x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;transition:background .15s;
}
.gsh-x:hover{background:rgba(255,255,255,.16)}
.gsh-x svg{width:14px;height:14px}
.gsh-head{display:flex;align-items:center;gap:14px;padding-right:34px;margin-bottom:18px}
.gsh-art{
  flex:none;width:58px;height:58px;border-radius:18px;
  background:linear-gradient(160deg,var(--gsh-c1,#334155),var(--gsh-c2,#0f172a));
  background-size:82%,cover;background-position:center;background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px rgba(0,0,0,.4);
}
.gsh-t{font-weight:900;font-size:17px;line-height:1.25;letter-spacing:.005em}
.gsh-s{margin-top:4px;font-weight:600;font-size:12.5px;line-height:1.4;color:#7f8cab}
.gsh-row{display:flex;gap:8px;align-items:center;margin-bottom:18px}
.gsh-link{
  flex:1;min-width:0;height:44px;box-sizing:border-box;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);color:#c9d2ea;font:600 13px Inter,system-ui,sans-serif;outline:none;
  text-overflow:ellipsis;
}
.gsh-link:focus{border-color:rgba(212,160,23,.6)}
.gsh-copy{
  flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  background:#d4a017;color:#0a0a0d;font:800 13px Inter,system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 6px 16px rgba(212,160,23,.3);transition:background .15s,transform .1s;
}
.gsh-copy:hover{background:#e8b52a}
.gsh-copy:active{transform:translateY(1px)}
.gsh-copy.ok{background:#22c55e;color:#04210f;box-shadow:0 6px 16px rgba(34,197,94,.3)}
.gsh-lab{font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7f8cab;margin-bottom:10px}
.gsh-plat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gsh-p{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;border:0;background:none;cursor:pointer;color:#c9d2ea;
}
.gsh-p span{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .15s,transform .12s;
}
.gsh-p svg{width:22px;height:22px}
.gsh-p em{font-style:normal;font-weight:700;font-size:11px;color:#7f8cab}
.gsh-p:hover span{transform:translateY(-2px)}
.gsh-p.wa:hover span{background:#25d366;color:#04210f}
.gsh-p.tg:hover span{background:#2aabee;color:#fff}
.gsh-p.fb:hover span{background:#1877f2;color:#fff}
.gsh-p.tw:hover span{background:#fff;color:#0a0a0d}
.gsh-p:focus-visible{outline:none}
.gsh-p:focus-visible span{outline:2px solid #ffb627;outline-offset:2px}

html[data-theme="light"] .gsh-card{background:#fff;color:#14182b;border-color:rgba(30,40,80,.12);box-shadow:0 30px 80px rgba(20,24,43,.35)}
html[data-theme="light"] .gsh-x,html[data-theme="light"] .gsh-p span{background:#eef1f8;color:#14182b}
html[data-theme="light"] .gsh-link{background:#f2f4fa;border-color:rgba(30,40,80,.12);color:#3b4158}
html[data-theme="light"] .gsh-s,html[data-theme="light"] .gsh-lab,html[data-theme="light"] .gsh-p em{color:#6b7490}

@media (max-width:420px){
  .gsh-card{padding:20px 16px 18px;border-radius:22px}
  .gsh-t{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .gsh-ov,.gsh-card,.gc-share{transition:none}
}