/* Z ENGINE · Pratinjau kartu game (pasangan game-peek-2026.js), 22 Okt 2026.
   Lembar dipasang langsung di <body>, jadi token tema dihitung ulang di sini
   (lihat jebakan --lux-gold di wallet-2026.css). HP: lembar dari bawah;
   desktop (≥721px): dialog di tengah. */
.gp-sheet,.gp-hint{
  --gp-accent:var(--theme-accent,var(--gold,#d6a83d));
  --gp-on-accent:var(--theme-dark,var(--navy,#06151f));
  --gp-bg:color-mix(in srgb,var(--theme-dark-2,var(--navy2,#14202e)) 94%,#fff 6%);
  --gp-line:color-mix(in srgb,#fff 12%,transparent);
  --gp-muted:color-mix(in srgb,#fff 60%,transparent);
}
html.gp-lock,html.gp-lock body{overflow:hidden}
.gp-backdrop{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.gp-backdrop.open{opacity:1;pointer-events:auto}
.gp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:2147483001;max-height:86vh;overflow:auto;overscroll-behavior:contain;
  background:var(--gp-bg);color:#fff;border-radius:22px 22px 0 0;border:1px solid var(--gp-line);border-bottom:0;
  box-shadow:0 -18px 50px rgba(0,0,0,.45);padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .26s cubic-bezier(.2,.8,.2,1);font-family:Manrope,system-ui,sans-serif;outline:0}
.gp-sheet::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:var(--gp-line);margin:0 auto 12px}
.gp-sheet.open{transform:none}
.gp-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--gp-line);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.gp-head{display:flex;gap:14px;align-items:center;padding-right:38px}
.gp-thumb{flex:0 0 78px;height:78px;border-radius:16px;overflow:hidden;background:#0006;display:grid;place-items:center;font-size:30px}
.gp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gp-head h3{margin:0;font-size:17px;line-height:1.25;font-weight:800;color:#fff;font-family:inherit;letter-spacing:0}
.gp-head p{margin:4px 0 0;color:var(--gp-muted);font-size:12.5px;font-weight:600}
.gp-body{margin-top:14px;display:grid;gap:12px}
.gp-rtp{border:1px solid var(--gp-line);border-radius:16px;padding:12px 14px;background:color-mix(in srgb,#fff 4%,transparent)}
.gp-rtp>div{display:flex;align-items:baseline;gap:10px}
.gp-rtp small{color:var(--gp-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.gp-rtp b{font-size:24px;font-weight:800;color:var(--gp-accent);margin-left:auto}
.gp-rtp span{font-size:12px;font-weight:700;color:var(--gp-muted)}
.gp-rtp.gp-hot span{color:#fb923c}
.gp-rtp>i{display:block;height:6px;border-radius:6px;background:color-mix(in srgb,#fff 10%,transparent);margin-top:9px;overflow:hidden}
.gp-rtp>i>b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--gp-accent) 55%,transparent),var(--gp-accent))}
.gp-hot>i>b{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.gp-stats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gp-stats li{display:flex;gap:12px;align-items:center;border:1px solid var(--gp-line);border-radius:14px;padding:10px 12px}
.gp-stats li>i{font-style:normal;font-size:20px;flex:0 0 26px;text-align:center}
.gp-stats span{font-size:13.5px;line-height:1.35}
.gp-stats span b{color:#fff}
.gp-stats span em{font-style:normal;font-weight:800;color:var(--gp-on-accent);background:var(--gp-accent);border-radius:999px;padding:1px 7px;font-size:11.5px;margin-left:4px}
.gp-stats small{display:block;color:var(--gp-muted);font-size:11.5px;margin-top:1px}
.gp-actions{display:flex;gap:10px;margin-top:14px}
.gp-actions button{flex:1;min-height:48px;border-radius:14px;font:inherit;font-weight:800;font-size:14.5px;cursor:pointer;letter-spacing:.01em}
.gp-play{border:0;background:var(--gp-accent);color:var(--gp-on-accent);flex:1.6!important}
.gp-fav{background:transparent;border:1px solid var(--gp-line);color:#fff}
.gp-fav.is-on{border-color:var(--gp-accent);color:var(--gp-accent)}
.gp-fav:disabled{opacity:.6}
.gp-error{margin:0;color:var(--gp-muted);font-size:13px}
.gp-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#ffffff10,#ffffff22,#ffffff10);background-size:200% 100%;animation:gp-shine 1.1s infinite;margin:6px 0}
.gp-skel.w40{width:40%}.gp-skel.w70{width:70%}.gp-skel.w80{width:80%}.gp-skel.w90{width:90%}
@keyframes gp-shine{to{background-position:-200% 0}}
@media (min-width:721px){
  .gp-sheet{left:50%;top:50%;right:auto;bottom:auto;width:min(400px,92vw);border-radius:22px;border-bottom:1px solid var(--gp-line);
    transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s;padding:18px}
  .gp-sheet::before{display:none}
  .gp-sheet.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
}
/* Tombol ⓘ desktop: hanya tampak saat kursor di atas kartu. */
.gp-info{position:absolute;top:6px;left:6px;z-index:6;width:26px;height:26px;border-radius:50%;border:1px solid #fff6;background:rgba(0,0,0,.6);color:#fff;
  font:italic 800 14px/1 Georgia,serif;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .15s,transform .15s;padding:0}
.gp-has-info:hover>.gp-info,.gp-info:focus-visible{opacity:1;transform:none}
.gp-info:hover{background:var(--theme-accent,var(--gold,#d6a83d));color:var(--theme-dark,#06151f);border-color:transparent}
/* HP: tahan kartu tanpa memunculkan menu "simpan gambar" iOS. */
a[href*="/main/"] img,article:has(a[href*="/main/"]) img{-webkit-touch-callout:none}
.gp-hint{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:2147482999;transform:translate(-50%,20px);opacity:0;
  background:var(--gp-bg);color:#fff;border:1px solid color-mix(in srgb,var(--gp-accent) 50%,transparent);border-radius:999px;padding:10px 16px;
  font:600 12.5px/1.3 Manrope,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:opacity .3s,transform .3s;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.gp-hint.show{opacity:1;transform:translate(-50%,0)}
.gp-hint b{color:var(--gp-accent)}
@media (prefers-reduced-motion:reduce){.gp-sheet,.gp-backdrop,.gp-hint{transition:none}.gp-skel{animation:none}}