/* Game pages (/games/<id>/): the demo window, the partner casino panel and the factual text around them.
   Loads after /demo/showcase.css and reuses its tokens (--mint, --violet-glow, --panel, ...). */
.game-page-body{overflow-x:clip}
.gp{max-width:1240px;margin:0 auto;padding:22px 0 44px}
.gp a{color:inherit}

/* Breadcrumb */
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none;font-size:13px;color:#8f9aa8}
.crumbs li{min-width:0}
.crumbs li+li:before{content:'/';margin-right:8px;opacity:.45}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#cfd7e2;overflow-wrap:anywhere}

/* Title block */
.gp-head{margin:18px 0 22px}
.gp-head h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05;font-weight:800;letter-spacing:-.05em;color:var(--cream);overflow-wrap:anywhere}
.gp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gp-chips li{padding:5px 11px;border-radius:999px;font-size:12px;color:#d4dbe6;background:#ffffff0d;border:1px solid #ffffff1a}
.gp-chips li:first-child{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.gp-lede{max-width:68ch;margin-top:14px;font-size:16px;line-height:1.65;color:#b9c2cf}

/* Layout: window + body on the left, the casino panel on the right; on phones the panel sits right under the window. */
.gp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:'stage side' 'body side';column-gap:26px;align-items:start}
.stage{grid-area:stage;min-width:0}
.gp-side{grid-area:side;grid-row:1 / span 2;position:sticky;top:92px;display:grid;gap:16px;min-width:0}
.gp-body{grid-area:body;min-width:0}

/* The demo window */
.player-window{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#07090d;border:1px solid color-mix(in srgb,var(--accent) 40%,#9b4dff40);box-shadow:0 30px 80px -42px color-mix(in srgb,var(--accent) 70%,#7700d2)}
.player-poster{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.poster-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(26px) brightness(.5) saturate(1.2);z-index:-2}
.player-poster:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 45%,transparent,#05070bcc 100%)}
.player-window.is-unavailable .player-poster:after,.player-poster:not(:has(.poster-bg)):after{background:radial-gradient(50% 60% at 50% 42%,color-mix(in srgb,var(--accent) 38%,#0b0d12),#0b0d12 80%)}
.poster-inner{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;max-width:100%;text-align:center}
.poster-cover{display:block;height:auto;width:auto;max-width:min(300px,62vw);max-height:min(48%,260px);min-height:90px;border-radius:14px;object-fit:contain;box-shadow:0 24px 60px -18px #000,0 0 0 1px #ffffff26,0 0 60px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.poster-typo{display:grid;gap:6px;justify-items:center}
.poster-typo .typo-name{font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 18px #0008;overflow-wrap:anywhere}
.poster-typo .typo-provider{font-size:15px;font-weight:600;color:color-mix(in srgb,var(--accent) 80%,#fff)}
.play-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border-radius:14px;background:var(--mint);color:#082113;font-size:17px;font-weight:800;letter-spacing:-.01em;box-shadow:0 14px 40px -12px #6ae9a4aa;transition:transform .15s,background-color .15s}
.play-button:hover{background:#a7f8ce;transform:translateY(-1px)}
.gp a.play-button{color:#082113}
.poster-caption{font-size:13px;color:#c4ccd8}
.poster-hint{max-width:46ch;font-size:13px;line-height:1.55;color:#e4c98f}
.player-host{position:absolute;inset:0;background:#000}
.player-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.inline-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#c4ccd8;font-size:15px;background:#07090d;z-index:1}
.inline-loading[hidden]{display:none}
.player-error{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;background:#0b0d12}
.player-error h2{font-size:22px;font-weight:750}
.player-error p{max-width:44ch;font-size:14px;line-height:1.6;color:#aeb8c6}
.error-actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;margin-top:6px}
.quiet-link{color:#cfd7e2;text-decoration:underline;text-underline-offset:3px;font-size:14px}
.expand-close{position:absolute;top:12px;right:12px;z-index:3;min-height:42px;padding:0 16px;border-radius:999px;background:#0b0d12e6;border:1px solid #ffffff33;color:#fff;font-size:13px;font-weight:650}
.expand-close:hover{background:#1b2230}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin-top:12px;font-size:13px;color:#98a3b2}
.stage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.bar-link{color:#cfd7e2;text-decoration:underline;text-underline-offset:3px}
.bar-link:hover{color:#fff}
.bar-button{min-height:38px;padding:0 15px;border-radius:9px;background:#ffffff0f;border:1px solid #ffffff1f;color:#e4e9f1;font-size:13px;font-weight:600}
.bar-button:hover{background:#9b4dff2b;border-color:var(--violet-glow)}
.noscript-note{margin-top:10px;font-size:13px;color:#e4c98f}
/* Full view works everywhere (also iOS Safari, which has no element fullscreen). */
.gp-expanded{overflow:hidden}
.player-window.is-expanded{position:fixed;inset:0;z-index:60;aspect-ratio:auto;border-radius:0;border:0;height:auto}
.gp-expanded .casino-sticky{display:none}

/* Partner casino panel */
.casino-panel{padding:22px 22px 20px;border-radius:18px;background:linear-gradient(160deg,#1b1530,#12101f 60%,#101820);border:1px solid #9b4dff52;box-shadow:0 26px 70px -40px #7700d2}
.casino-panel h2{font-size:21px;line-height:1.18;font-weight:750;letter-spacing:-.035em;color:#f2ecff}
.casino-panel p{margin-top:12px;font-size:13px;line-height:1.65;color:#b8bfd0}
.casino-panel .cta-row{margin-top:18px}
.casino-panel .cta-row .primary-button{flex:1;margin:0}
.casino-panel .casino-disclosure{margin-top:12px;font-size:11.5px;line-height:1.5;color:#d6cfe8;font-weight:600}
.casino-panel .casino-note{margin-top:8px;font-size:12px;color:#8f98aa}
.casino-panel .casino-unavailable{color:#efc995}
.viper-mini{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--panel);border:1px solid #22c55e44}
.viper-mini img{flex:none;width:72px;height:72px;border-radius:12px;object-fit:contain;background:#080d1a}
.viper-mini strong{display:block;font-size:14px;line-height:1.3;letter-spacing:-.02em;color:#f0f5f1}
.mini-play{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--mint);font-size:13px;font-weight:700}
.mini-play:hover{color:#a7f8ce}

/* Text sections */
.gp-body{padding-top:30px}
.gp-section{padding:0 0 30px}
.gp-section h2,.gp-related h2,.gp-promo h2{font-size:25px;line-height:1.2;font-weight:750;letter-spacing:-.04em;margin-bottom:12px;color:#f0f5f1}
.gp-section p{max-width:72ch;font-size:15px;line-height:1.75;color:#b4beca}
.gp-section p+p{margin-top:12px}
.gp-section a{text-decoration:underline;text-underline-offset:3px;color:#d9c2ff}
.gp-section a:hover{color:#fff}
.steps{margin:0;padding-left:22px;max-width:72ch;display:grid;gap:9px;font-size:15px;line-height:1.7;color:#b4beca}
.steps li::marker{color:var(--mint);font-weight:700}
.tip{margin-top:16px!important;padding:13px 16px;border-radius:12px;background:#22c55e12;border:1px solid #22c55e33;color:#cfe9da!important}
.tip strong{color:var(--mint)}
.reminder{margin-top:12px!important;font-size:13px!important;color:#8f9aa8!important}
.facts dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.facts dl>div{padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);min-width:0}
.facts dt{font-size:12px;color:#8f9aa8}
.facts dd{margin:4px 0 0;font-size:16px;font-weight:650;color:#eef2f7;overflow-wrap:anywhere}
.facts .facts-source{margin-top:12px;font-size:13px;color:#8f9aa8}
.faq details{border-top:1px solid var(--line);padding:2px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:10px 0;font-size:16px;font-weight:650;color:#e8edf4}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';flex:none;font-size:22px;font-weight:400;color:var(--mint);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px;max-width:68ch}

/* Related games + ViperCoil promo */
.gp-related{padding:34px 0 8px;border-top:1px solid var(--line);margin-top:6px}
.mini-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.mini-card{display:block;min-width:0;border-radius:14px;background:var(--panel);border:1px solid #ffffff10;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.mini-card:hover,.mini-card:focus-visible{border-color:var(--violet-glow);box-shadow:0 12px 30px -16px #9b4dffcc}
.mini-art{display:block;aspect-ratio:5/4;overflow:hidden;background:#1a2221}
.mini-art img{display:block;width:100%;height:100%;object-fit:cover}
.mini-typo{display:grid;place-items:center;height:100%;padding:8px;text-align:center;font-weight:800;color:#fff;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 38%,#0b0d12),#0b0d12 75%)}
.mini-name{display:block;padding:10px 12px 0;font-size:14px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.mini-sub{display:block;padding:2px 12px 12px;font-size:12px;color:#8f9aa8}
.gp-promo{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:center;margin-top:36px;padding:24px;border-radius:20px;border:1px solid #22c55e55;background:linear-gradient(135deg,#0f2418,#150f26)}
.gp-promo img{width:150px;height:150px;border-radius:16px;object-fit:contain;background:#080d1a}
.promo-label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}
.gp-promo h2{margin-bottom:8px}
.gp-promo p{max-width:56ch;margin-bottom:16px;font-size:15px;line-height:1.65;color:#bcc6d2}
.gp-promo .primary-button{display:inline-flex;gap:14px}

/* Sticky casino bar: phones and narrow windows only */
.casino-sticky{display:none}

@media(max-width:1300px){.gp{margin-left:28px;margin-right:28px}}
@media(max-width:1100px){
  .gp-layout{grid-template-columns:minmax(0,1fr) 300px;column-gap:20px}
  .mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .gp-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'stage' 'side' 'body'}
  .gp-side{grid-row:auto;position:static}
  .gp{padding-bottom:110px}
  .casino-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#0d0a18f2;border-top:1px solid #9b4dff66;backdrop-filter:blur(14px);transition:transform .25s ease}
  .casino-sticky.is-hidden{transform:translateY(110%)}
  .casino-sticky .primary-button{min-height:46px;padding:0 18px;width:100%}
  .casino-sticky small{grid-column:1 / -1;font-size:10.5px;line-height:1.35;color:#cbc4de}
  .casino-sticky .age-badge-inline{width:38px;height:38px}
}
@media(max-width:767px){
  .gp{margin-left:18px;margin-right:18px;padding-top:16px}
  .showcase-header nav a[href="/demo/#how"],.showcase-header nav a[href="/"]{display:none}
  .gp-head{margin:14px 0 18px}
  .gp-lede{font-size:15px}
  .player-window{aspect-ratio:auto;height:clamp(420px,calc(100svh - 190px),640px);border-radius:14px}
  .poster-cover{max-height:clamp(110px,28%,200px)}
  .play-button{min-height:52px;padding:0 26px;font-size:16px}
  .facts dl{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gp-promo{grid-template-columns:1fr;gap:16px;padding:20px}
  .gp-promo img{width:96px;height:96px}
  .gp-section h2,.gp-related h2,.gp-promo h2{font-size:22px}
  .player-window.is-expanded{height:auto}
}
@media(max-width:479px){
  .showcase-header nav{display:none}
  .casino-panel{padding:18px}
  .casino-panel h2{font-size:19px}
  .stage-bar{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.play-button{transition:none}}