/* Shared game popup — same chrome as /games/, scoped to .esc-gm */

.esc-gm{
  --esc-surface:#242424; --esc-surface-2:#2b2b2b;
  --esc-text:#fff; --esc-light:#f2f2f2; --esc-muted:#b3b3b3; --esc-muted-2:#8f8f8f;
  --esc-border:rgba(255,255,255,.08); --esc-border-strong:rgba(255,255,255,.16);
  --esc-accent:#ff0004; --esc-accent-hover:#d40c10; --esc-accent-line:rgba(255,0,4,.45); --esc-accent-text:#ff6b6d;
  --esc-pad:24px; --esc-tap:44px;
  --esc-r-btn:6px; --esc-r-sm:12px; --esc-r-lg:24px; --esc-r-pill:999px;
  --esc-ease:ease-in-out; --esc-t-fast:.2s ease-in-out; --esc-t-def:.3s ease-in-out;
  font-family:'Ubuntu',Arial,sans-serif;
}
.esc-gm :where(*){ box-sizing:border-box; }
.esc-gm :where(button){ cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; padding:0; touch-action:manipulation; }
.esc-gm :where(a){ color:inherit; text-decoration:none; touch-action:manipulation; }
.esc-gm :focus-visible{ outline:2px solid var(--esc-accent); outline-offset:3px; border-radius:6px; }

.esc-gm-back{
  position:fixed; inset:0; z-index:9995; background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity var(--esc-t-def);
  display:flex; align-items:flex-end; justify-content:center;
}
.esc-gm[data-modal="1"] .esc-gm-back{ opacity:1; pointer-events:auto; }
.esc-gm-modal{
  width:100%; max-width:680px; max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--esc-surface); border:1px solid var(--esc-border-strong);
  border-radius:var(--esc-r-lg) var(--esc-r-lg) 0 0; position:relative;
  transform:translateY(24px) scale(.985); opacity:.4;
  transition:transform var(--esc-t-def), opacity var(--esc-t-def);
}
.esc-gm[data-modal="1"] .esc-gm-modal{ transform:none; opacity:1; }
.esc-gm-close{
  position:absolute; top:12px; right:12px; z-index:2; width:var(--esc-tap); height:var(--esc-tap);
  display:flex; align-items:center; justify-content:center; border-radius:var(--esc-r-pill);
  background:rgba(0,0,0,.6); border:1px solid var(--esc-border-strong); color:#fff; backdrop-filter:blur(8px);
}
.esc-gm-close svg{ width:20px; height:20px; }
.esc-gm-close:hover{ background:var(--esc-accent); border-color:var(--esc-accent); }

.esc-gm-media{ aspect-ratio:16/9; background:#000; position:relative; }
.esc-gm-modal[data-media="cover"] .esc-gm-media::after{
  content:""; position:absolute; inset:auto 0 -1px; height:66%; pointer-events:none;
  background:linear-gradient(180deg,rgba(36,36,36,0) 0%,rgba(36,36,36,.55) 48%,var(--esc-surface) 100%);
}
.esc-gm-modal[data-media="cover"] .esc-gm-b{ margin-top:-58px; position:relative; z-index:1; }
.esc-gm-media[data-ph="1"]{
  background:url("/wp-content/uploads/esclub-media/logo/esc-logo-white.svg") center/26% auto no-repeat,linear-gradient(160deg,#2b2b2b,#1a1a1a);
}
.esc-gm-media[data-ph="1"] img{ display:none; }
.esc-gm-media video, .esc-gm-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.esc-gm-media video{ cursor:pointer; }

.esc-gm-mplay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42)); transition:opacity var(--esc-t-def);
}
.esc-gm-mplay i{
  display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:var(--esc-r-pill);
  background:var(--esc-accent); color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.5);
  transition:transform var(--esc-t-def), background-color var(--esc-t-fast), box-shadow var(--esc-t-def);
}
.esc-gm-mplay svg{ width:26px; height:26px; margin-left:3px; fill:currentColor; stroke:none; }
.esc-gm-mplay:hover i{ background:var(--esc-accent-hover); transform:scale(1.08); box-shadow:0 10px 36px rgba(255,0,4,.4); }
.esc-gm-media[data-playing="1"] .esc-gm-mplay{ opacity:0; pointer-events:none; }

.esc-gm-sound{
  position:absolute; right:12px; bottom:12px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid var(--esc-border-strong); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition:transform .25s var(--esc-ease), background .25s var(--esc-ease), border-color .25s var(--esc-ease);
}
.esc-gm-sound:hover{ transform:scale(1.08); background:var(--esc-accent); border-color:var(--esc-accent); }
.esc-gm-sound svg{ width:20px; height:20px; }
.esc-gm-sound .ico-on{ display:none; }
.esc-gm-sound.sound-on .ico-on{ display:block; }
.esc-gm-sound.sound-on .ico-off{ display:none; }

.esc-gm-b{ padding:20px var(--esc-pad) calc(24px + env(safe-area-inset-bottom, 0px)); }
.esc-gm-sub{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--esc-accent-text); margin:0;
}
.esc-gm-sub::before{ content:""; width:20px; height:2px; background:var(--esc-accent); opacity:.85; }
.esc-gm-b .esc-gm-t{ font-family:'Ubuntu',Arial,sans-serif; letter-spacing:0; font-size:clamp(24px,3.2vw,34px); margin:10px 0 0; padding-right:48px; text-wrap:balance; font-weight:700; line-height:1.2; color:#fff; }
.esc-gm-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px; }
.esc-gm-meta > span{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--esc-r-pill);
  border:1px solid var(--esc-border-strong); background:rgba(255,255,255,.04); font-size:13px; font-weight:500; color:var(--esc-light);
}
.esc-gm-meta svg{ width:15px; height:15px; color:var(--esc-accent-text); }
.esc-gm-d{ color:var(--esc-muted); font-size:16px; line-height:1.6; max-width:56ch; text-wrap:pretty; margin:0; }

.esc-gm-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.esc-gm-btn{
  flex:1 1 190px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap; font-weight:500; font-size:16px; line-height:1.1; padding:15px 26px;
  border-radius:var(--esc-r-btn); min-height:52px; border:1px solid transparent;
  transition:background-color var(--esc-t-fast), color var(--esc-t-fast), border-color var(--esc-t-fast), transform var(--esc-t-fast);
}
.esc-gm-btn-primary{ background:var(--esc-accent); color:#fff; }
.esc-gm-btn-primary:hover{ background:var(--esc-accent-hover); color:#fff; transform:translateY(-2px); }
.esc-gm-btn-ghost{ border-color:var(--esc-accent); color:var(--esc-text); }
.esc-gm-btn-ghost:hover{ background:var(--esc-accent-hover); border-color:var(--esc-accent-hover); color:#fff; transform:translateY(-2px); }
.esc-gm-btn:active{ transform:scale(.975); }

.esc-gm-sim{ margin-top:28px; border-top:1px solid var(--esc-border); padding-top:22px; }
.esc-gm-sim-t{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--esc-muted-2); font-weight:700; margin-bottom:14px;
}
.esc-gm-sim-t::before{ content:""; width:20px; height:2px; background:var(--esc-muted-2); opacity:.6; }
.esc-gm-sim-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:480px){
  .esc-gm-sim-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.esc-gm-sim-c{
  text-align:left; border-radius:var(--esc-r-sm); overflow:hidden; background:var(--esc-surface-2);
  border:1px solid var(--esc-border); transition:border-color var(--esc-t-fast), transform var(--esc-t-def);
}
.esc-gm-sim-c:hover{ border-color:var(--esc-accent-line); transform:translateY(-3px); }
.esc-gm-sim-c .esc-gm-cover{ display:block; position:relative; aspect-ratio:16/9; background:var(--esc-surface-2); overflow:hidden; }
.esc-gm-sim-c .esc-gm-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.esc-gm-sim-c .esc-gm-cover[data-ph="1"]{
  background:url("/wp-content/uploads/esclub-media/logo/esc-logo-white.svg") center/56% auto no-repeat,linear-gradient(160deg,#2b2b2b,#1a1a1a);
}
.esc-gm-sim-c .esc-gm-cover[data-ph="1"] img{ display:none; }
.esc-gm-sim-c .esc-gm-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:32px; height:32px;
  border-radius:var(--esc-r-pill); display:flex; align-items:center; justify-content:center;
  background:var(--esc-accent); color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.esc-gm-sim-c .esc-gm-play::after{
  content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%);
}
.esc-gm-sim-c .esc-gm-play svg{ width:13px; height:13px; margin-left:2px; fill:currentColor; stroke:none; }
.esc-gm-sim-c > span:last-child{ display:block; padding:8px 10px 10px; font-size:13px; font-weight:500; line-height:1.3; color:var(--esc-light); }

@media (min-width:900px){
  .esc-gm-back{ align-items:center; padding:24px; }
  .esc-gm-modal{ border-radius:var(--esc-r-lg); max-height:88vh; max-height:88dvh; }
  .esc-gm-b{ padding:24px 30px 30px; }
  .esc-gm-modal[data-media="cover"] .esc-gm-b{ margin-top:-70px; }
}

@media (prefers-reduced-motion: reduce){
  .esc-gm-back, .esc-gm-modal, .esc-gm-mplay i, .esc-gm-sim-c, .esc-gm-btn, .esc-gm-sound{ transition:none !important; }
}

/* Landing cards: whole card opens the popup; play stays above the overlay */
.card[data-game]{ cursor:pointer; }
.card[data-game] .card-open{
  position:absolute; inset:0; z-index:3; border:none; background:transparent; cursor:pointer; padding:0;
}
.card[data-game] .card-open:focus-visible{ outline:2px solid var(--accent, #ff0004); outline-offset:-4px; }
.card[data-game] button.card-play{ z-index:4; }