/* Plinko demo card — sits beside the two category tiles; uses the page's v4 tokens. */

/* ---- hero split: copy (left) + game card (right) ---- */
.hero-inner.hero-split { max-width:calc(1320 * var(--u)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0, calc(500 * var(--u))); align-items:center; gap:calc(56 * var(--u)); text-align:left }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:calc(20 * var(--u)) }
.hero-split .hero-title { text-wrap:balance }
.hero-split .hero-subtitle { max-width:calc(560 * var(--u)) }

/* ---- card shell (same family as .tile, green accent) ---- */
.pg-card { position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); border:1px solid var(--border-10); border-radius:calc(20 * var(--u)); background:#0e131d }
.pg-glow { position:absolute; top:-1px; left:-1px; right:-1px; height:calc(140 * var(--u)); border:1px solid #9ae600; border-bottom:0; border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0; background:linear-gradient(180deg,rgba(154,230,0,0.22),transparent); -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent); mask-image:linear-gradient(180deg,#000 20%,transparent); pointer-events:none }
.pg-head { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px }
.pg-title { margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase; line-height:1.15; color:var(--text); font-size:clamp(18px,calc(26 * 100vw / 1920),26px) }
.pg-title b { color:#9ae600 }
.pg-sub { position:relative; margin:-4px 0 0; color:var(--body-text); font-size:13px; line-height:1.4 }
.pg-badge { display:inline-flex; padding:6px 10px; border:0.5px solid var(--border-yellow); border-radius:999px; background:rgba(232,199,92,0.15); color:var(--brand); font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap }

/* ---- board ---- */
.pg-stage { position:relative; flex:1 1 auto; min-height:260px; border-radius:14px; background:radial-gradient(120% 80% at 50% 0%,rgba(194,122,255,0.16),transparent 60%),#0a0f19; cursor:pointer; overflow:hidden }
.pg-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:manipulation }
.pg-hint { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); padding:9px 16px; border-radius:999px; background:rgba(4,13,20,0.82); border:1px solid rgba(244,218,90,0.55); color:var(--btn); font-weight:800; font-size:14px; white-space:nowrap; pointer-events:none; animation:pg-pulse 1.6s ease-in-out infinite; transition:opacity .3s ease }
.pg-played .pg-hint { opacity:0; animation:none }
@keyframes pg-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(244,218,90,0.45) } 50% { box-shadow:0 0 0 10px rgba(244,218,90,0) } }

/* ---- controls ---- */
.pg-bar { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px }
.pg-stat { display:flex; flex-direction:column; gap:2px }
.pg-stat-label { color:var(--subtitle); font-size:10px; text-transform:uppercase; letter-spacing:.05em }
.pg-stat-value { color:var(--text); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums }
.pg-bet { display:inline-flex; align-items:center; gap:4px }
.pg-step { width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.04); color:var(--text); font-size:17px; font-weight:700; line-height:1; cursor:pointer }
.pg-step:disabled { opacity:.35; cursor:default }
.pg-bet-value { min-width:30px; text-align:center; color:var(--text); font-weight:700; font-variant-numeric:tabular-nums }
.pg-drop { margin-left:auto; min-height:44px; padding:10px 24px; border:0; border-radius:999px; background:var(--btn); color:var(--brand-on); font-family:var(--font-body); font-weight:800; font-size:15px; cursor:pointer; animation:pg-pulse 1.6s ease-in-out infinite }
.pg-played .pg-drop { animation:none }
.pg-drop:hover:not(:disabled) { filter:brightness(1.06) }
.pg-drop:disabled { opacity:.45; cursor:default; animation:none }
.pg-reset { min-height:40px; padding:8px 14px; border:1px solid rgba(255,255,255,0.3); border-radius:999px; background:transparent; color:var(--text); font-weight:600; font-size:13px; cursor:pointer }
.pg-step:focus-visible,.pg-drop:focus-visible,.pg-reset:focus-visible,.pg-bonus:focus-visible,.pg-dialog-cta:focus-visible,.pg-dialog-close:focus-visible,.pg-stage:focus-visible { outline:2px solid var(--text); outline-offset:2px }
.pg-foot { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px }
.pg-last { min-height:18px; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; color:var(--subtitle) }
.pg-last--win { color:#9ae600 }
.pg-bonus { color:var(--brand); font-weight:700; font-size:13px; text-decoration:underline; text-underline-offset:3px }
.pg-note { position:relative; margin:0; color:var(--subtitle); font-size:11px; line-height:1.4 }
.pg-noscript { color:var(--body-text); font-size:14px }
.pg-noscript a { color:var(--brand) }
.pg-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0 }
.pg-card:not(.pg-ready) .pg-bar,.pg-card:not(.pg-ready) .pg-hint { visibility:hidden }

/* ---- bonus dialog (covers the card) ---- */
.pg-dialog { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:14px; border-radius:inherit; background:rgba(4,13,20,0.8); backdrop-filter:blur(3px) }
.pg-dialog[hidden] { display:none }
.pg-dialog-card { width:min(100%,360px); padding:22px 18px 16px; border:1px solid rgba(232,199,92,0.45); border-radius:16px; background:linear-gradient(180deg,rgba(232,199,92,0.14),rgba(232,199,92,0) 60%),#0e1c27; text-align:center; display:flex; flex-direction:column; gap:10px; box-shadow:0 20px 50px rgba(0,0,0,.5) }
.pg-dialog-kicker { color:var(--brand); font-family:var(--font-display); text-transform:uppercase; font-size:12px; letter-spacing:.05em }
.pg-dialog-title { margin:0; color:var(--text); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:22px; line-height:1.1 }
.pg-dialog-title span { color:var(--brand) }
.pg-dialog-text { margin:0; color:var(--body-text); font-size:14px; line-height:1.5 }
.pg-dialog-text b { color:var(--text) }
.pg-dialog-cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border-radius:999px; background:var(--btn); color:var(--brand-on); font-weight:800; font-size:16px; text-decoration:none }
.pg-dialog-cta:hover { filter:brightness(1.06) }
.pg-dialog-close { background:none; border:0; color:var(--subtitle); font-size:13px; text-decoration:underline; cursor:pointer; padding:6px }
.pg-dialog-legal { margin:0; color:var(--subtitle); font-size:11px }

@media (prefers-reduced-motion: reduce) { .pg-hint,.pg-drop { animation:none } }

/* tablet & phone: hero stacks again — centred copy, game underneath */
@media (max-width:1100px) {
  .hero-inner.hero-split { display:flex; flex-direction:column; align-items:center; text-align:center; max-width:calc(1080 * var(--u)); gap:28px }
  .hero-copy { align-items:center }
  .pg-card { width:100%; max-width:560px; padding:16px; text-align:left }
  .pg-stage { flex:none; aspect-ratio:1 / 0.8; min-height:0 }
}
@media (max-width:600px) {
  .pg-card { padding:12px }
  .pg-drop { margin-left:0; flex:1 1 100% }
}