/* Reuse the original game's menu, full-screen stage, HUD and result styles. */
.public-demo { overflow: hidden; background: var(--c_demo_051325, #051325); }
.public-demo [hidden] { display: none !important; }
.public-demo :focus-visible { outline: 3px solid var(--c_demo_0b91c6, #0b91c6); outline-offset: 4px; }
.public-demo .game-menu-scene { background-image: url('/assets/hero-polar-v2.png'); }
.public-demo .game-menu-scene::after { background: linear-gradient(180deg, rgb(var(--c_demo_031526-rgb, 3 21 38) / 0.6), rgb(var(--c_demo_031526-rgb, 3 21 38) / 0.9098039215686274)); backdrop-filter: blur(8px); }
.public-demo .game-menu-card { width: min(420px, 100%); }
.public-demo .game-menu-link { display: flex; justify-content: center; align-items: center; text-decoration: none; }
.demo-badge, .demo-mode { display: inline-flex; justify-content: center; align-items: center; padding: 6px 12px; border: 1px solid var(--c_demo_f2c777, #f2c777); border-radius: 999px; background: var(--c_demo_fff3d6, #fff3d6); color: var(--c_demo_80510d, #80510d); font-size: .875rem; line-height: 1.3; font-weight: 900; letter-spacing: .06em; }
.public-demo .game-modal .game-stage--menu,
.public-demo .game-modal .game-stage--result { justify-content: safe center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; }
.demo-intro { width: min(460px, 100%); flex: none; overflow: hidden; border: 1px solid rgb(var(--c_demo_8cecff-rgb, 140 236 255) / 0.3333333333333333); border-radius: 30px; background: var(--c_demo_08233a, #08233a); box-shadow: 0 28px 90px rgb(var(--c_demo_000000-rgb, 0 0 0) / 0.6); }
/* Unique names keep the portal's informational .demo-banner out of this flow. */
.demo-welcome-art { position: relative; width: 100%; height: clamp(260px, 57dvh, 470px); overflow: hidden; background: var(--c_demo_0a2540, #0a2540); }
.demo-welcome-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--c_demo_031629-rgb, 3 22 41) / 0.26666666666666666), transparent 30%, transparent 70%, var(--c_demo_08233a, #08233a)); pointer-events: none; }
.demo-welcome-art__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 51% center; }
.demo-welcome-art__logo { position: absolute; z-index: 1; top: 22px; left: 50%; transform: translateX(-50%); width: clamp(160px, 47vw, 210px); height: auto; filter: drop-shadow(0 4px 12px var(--c_demo_04172a, #04172a)); }
.demo-welcome-art__badge { position: absolute; z-index: 1; bottom: 4px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid rgb(var(--c_demo_7bdeef-rgb, 123 222 239) / 0.4); border-radius: 999px; background: rgb(var(--c_demo_05243b-rgb, 5 36 59) / 0.9215686274509803); color: var(--c_demo_baf5ff, #baf5ff); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-align: center; }
.demo-intro__action { padding: 20px clamp(18px, 5vw, 28px) 28px; }
.demo-primary { width: 100%; min-height: 66px; display: flex; align-items: center; justify-content: center; padding: 18px 24px; border: 1px solid var(--c_demo_99f3ff, #99f3ff); border-radius: 20px; background: linear-gradient(105deg, var(--c_demo_4ce3ef, #4ce3ef), var(--c_demo_13afe4, #13afe4)); color: var(--c_demo_052a43, #052a43); box-shadow: 0 12px 30px rgb(var(--c_demo_00a8db-rgb, 0 168 219) / 0.18823529411764706); font: inherit; font-size: 1.125rem; font-weight: 950; line-height: 1.3; text-decoration: none; text-align: center; cursor: pointer; transition: filter .16s, transform .16s; }
.demo-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.demo-primary:disabled { cursor: wait; opacity: .72; }
.demo-outcome { position: relative; width: min(460px, 100%); flex: none; padding: clamp(24px, 5vw, 36px) clamp(20px, 5vw, 32px) 22px; border: 1px solid var(--c_demo_e6faff, #e6faff); border-radius: 30px; background: radial-gradient(ellipse at 50% 0, rgb(var(--c_demo_b7f4ff-rgb, 183 244 255) / 0.5333333333333333), transparent 55%), linear-gradient(150deg, var(--c_demo_ffffff, #fff), var(--c_demo_edf9ff, #edf9ff)); box-shadow: 0 24px 80px rgb(var(--c_demo_00152a-rgb, 0 21 42) / 0.5019607843137255); text-align: center; animation: demo-outcome-in .4s ease-out both; }
.demo-outcome__brand { display: block; width: 76px; height: 76px; object-fit: contain; margin: 0 auto 14px; filter: drop-shadow(0 6px 12px rgb(var(--c_demo_158fb7-rgb, 21 143 183) / 0.16862745098039217)); }
.demo-outcome__label { margin: 0; color: var(--c_demo_48687e, #48687e); font-size: .75rem; font-weight: 900; letter-spacing: .1em; line-height: 1.5; }
.demo-outcome__title { margin: 12px 0 20px; color: var(--c_demo_10354f, #10354f); font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 950; line-height: 1.15; letter-spacing: -.035em; }
.demo-outcome__caption { margin: 0; color: var(--c_demo_496a80, #496a80); font-size: .875rem; line-height: 1.5; }
.demo-outcome__value { display: block; margin: 6px 0 16px; color: var(--c_demo_087c58, #087c58); font-size: clamp(3rem, 11.5vw, 4.5rem); font-weight: 950; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.demo-outcome__message { margin: 0 auto 24px; max-width: 34ch; color: var(--c_demo_48687e, #48687e); font-size: 1rem; line-height: 1.5; }
.demo-outcome__footnote { margin: 12px 0 0; color: var(--c_demo_59778b, #59778b); font-size: .75rem; line-height: 1.5; }
.demo-outcome[data-outcome="lost"] { background: radial-gradient(ellipse at 50% 0, rgb(var(--c_demo_d4e4f2-rgb, 212 228 242) / 0.5333333333333333), transparent 55%), linear-gradient(150deg, var(--c_demo_ffffff, #fff), var(--c_demo_edf6ff, #edf6ff)); }
.demo-outcome[data-outcome="lost"] .demo-outcome__value { color: var(--c_demo_3b617e, #3b617e); }
.public-demo .game-modal .game-stage--result { background: rgb(var(--c_demo_031426-rgb, 3 20 38) / 0.3333333333333333); backdrop-filter: blur(6px); }
.public-demo .game-stage--result-lost::before { display: none; }
@keyframes demo-outcome-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.demo-primary--register { min-height: 72px; font-size: 1.25rem; }
.demo-secondary { display: block; margin: 12px auto 0; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 12px; background: transparent; color: var(--c_demo_39617e, #39617e); font: inherit; font-size: .875rem; font-weight: 750; cursor: pointer; }
.demo-secondary:hover { color: var(--c_demo_0579ac, #0579ac); background: var(--c_demo_dff3fd, #dff3fd); }
.demo-error { padding: 12px; color: var(--c_demo_993e32, #993e32); background: var(--c_demo_fff0ec, #fff0ec); border-radius: 12px; font-size: .875rem; }
.demo-mode { position: absolute; z-index: 29; top: max(14px, calc(env(safe-area-inset-top) + 8px)); left: 50%; transform: translateX(-50%); pointer-events: none; }
.public-demo .game-hud--3d .demo-goal { margin-top: 42px; }
.public-demo .game-hud--3d .demo-goal strong { font-size: .875rem; }
.public-demo .game-hud--3d .demo-goal > span { font-size: .75rem; letter-spacing: 0; }
.public-demo .game-loading { padding: 24px; text-align: center; }
.public-demo .game-loading .game-menu-link { width: 200px; }
.public-demo .game-loading strong { max-width: 420px; font-size: 1rem; }
.public-demo .game-sound .audio-slash { display: none; }
.public-demo .game-sound[aria-pressed="false"] .audio-slash { display: block; }
.public-demo .game-demo-label--world { opacity: 1; padding: 4px 8px; border-radius: 8px; background: rgb(var(--c_demo_ffffff-rgb, 255 255 255) / 0.8784313725490196); color: var(--c_demo_315877, #315877); font-size: .75rem; }
.public-demo .game-powerup time { font-size: .75rem; min-width: 44px; }
.public-demo .game-powerup > strong { font-size: .75rem; line-height: 1.15; max-width: 90px; }
.public-demo .game-powerup { width: 80px; }
.public-demo .game-powerups, .public-demo .game-traps { max-width: 250px; }
.demo-exit { position: absolute; z-index: 210; inset: 0; display: grid; place-items: center; padding: 18px; background: rgb(var(--c_demo_03172a-rgb, 3 23 42) / 0.788235294117647); backdrop-filter: blur(10px); }
.demo-exit p { color: var(--c_demo_64809a, #64809a); line-height: 1.5; }
.demo-keyboard-launch { position: absolute; z-index: 23; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)); transform: translateX(-50%); pointer-events: auto; min-height: 44px; padding: 10px 16px; border: 1px solid var(--c_demo_93d8f5, #93d8f5); border-radius: 24px; color: var(--c_demo_174365, #174365); background: var(--c_demo_f0fbff, #f0fbff); font-weight: 800; }
.public-demo .game-instruction { bottom: max(82px, calc(env(safe-area-inset-bottom) + 74px)); }
.public-demo .game-power { bottom: max(170px, calc(env(safe-area-inset-bottom) + 162px)); }
.public-demo .game-hud--3d .game-hud__chip--right { grid-column: 3; }
.public-demo .game-demo-label--world { max-width: calc(100% - 180px); text-align: center; font-size: .65rem; }
.public-demo .game-cashout-celebration__badge { font-size: .875rem; }
@media (max-width: 600px) {
  .public-demo .game-menu-card { padding: 22px; }
  .public-demo .game-hud--3d { top: max(56px, calc(env(safe-area-inset-top) + 48px)); grid-template-columns: 88px minmax(0, 1fr) 82px; gap: 5px; }
  .public-demo .game-hud__left { width: 88px; }
  .public-demo .game-hud--3d .game-hud__chip--right { width: 82px; }
  .public-demo .game-hud--3d .game-hud__chip strong { font-size: .875rem; }
  .public-demo .game-hud--3d .game-hud__chip span { font-size: .75rem; letter-spacing: 0; }
  .public-demo .game-hud--3d .demo-goal { display: none; }
  .demo-mode { top: max(12px, calc(env(safe-area-inset-top) + 7px)); font-size: .75rem; padding: 6px 9px; }
  .public-demo .game-powerup { width: 68px; }
  .public-demo .game-powerup > strong { font-size: .75rem; }
  .public-demo .game-powerups, .public-demo .game-traps { max-width: 144px; gap: 9px 4px; }
  .public-demo .game-powerups, .public-demo .game-traps { top: max(210px, calc(env(safe-area-inset-top) + 202px)); }
  .public-demo .game-event { top: 46%; min-width: 0; width: min(300px, calc(100vw - 38px)); }
  .public-demo .game-cashout { bottom: max(56px, calc(env(safe-area-inset-bottom) + 46px)); min-width: min(290px, calc(100vw - 32px)); }
}
@media (max-width: 360px) {
  .public-demo .game-hud--3d { grid-template-columns: 86px 1fr 78px; }
  .public-demo .game-hud--3d .game-hud__chip--right { width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-demo *, .public-demo *::before, .public-demo *::after { animation: none !important; transition: none !important; }
}