/* StreetHeist landing, beat 18 (#demo): the real game held over the street
   in a landscape phone, the reaction log, the HUD and theatre mode for
   phones (spec r3 8.1). The game renders at 844 by 390 logical pixels and
   is scaled into the screen (sh-demo.js writes --c-scale). */
.sh-demo { min-height: 100svh; display: grid; align-content: center; justify-content: center; grid-template-columns: minmax(0, 440px) minmax(0, 820px); grid-template-areas: "head rig" "side rig" "cta hud"; gap: 26px clamp(32px, 4vw, 72px); }
.sh-demo__head { grid-area: head; align-self: end; }
.sh-demo__side { grid-area: side; align-self: start; display: grid; gap: 14px; }
.sh-demo .sh-cbeat__cta { grid-area: cta; margin-top: 0; align-self: start; }
.sh-demo .sh-cbeat__hud { grid-area: hud; }
.sh-demo .c-neon { left: 30%; right: 0; top: 18%; height: 46%; background: radial-gradient(40% 50% at 30% 60%, rgb(95 212 196 / 10%), transparent 70%), radial-gradient(35% 45% at 72% 40%, rgb(226 59 77 / 8%), transparent 70%), radial-gradient(40% 50% at 55% 70%, rgb(212 175 55 / 10%), transparent 70%); filter: blur(10px); }
.c-wash { inset: 0; opacity: 0; background: radial-gradient(80% 70% at 62% 50%, var(--c-wash, rgb(226 59 77 / 34%)), transparent 70%); }
.sh-demo[data-demo-pulse="bust"] .c-wash { --c-wash: rgb(226 59 77 / 36%); animation: c-wash 1s ease-out 1; }
.sh-demo[data-demo-pulse="cashout"] .c-wash { --c-wash: rgb(95 212 196 / 26%); animation: c-wash 1.4s ease-out 1; }
.sh-demo[data-demo-pulse="clean"] .c-wash { --c-wash: rgb(212 175 55 / 18%); animation: c-wash 1s ease-out 1; }
@keyframes c-wash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---- the phone ---- */
.sh-demo__rig { grid-area: rig; position: relative; display: grid; place-items: center; perspective: 1700px; padding-bottom: 40px; }
.sh-phone { position: relative; width: min(100%, 1000px, calc(58svh * 2.02)); padding: 1.9% 2.6%; border-radius: 7.4% / 16%; background: linear-gradient(150deg, #30343c 0%, #111317 26%, #0a0b0e 60%, #1b1e24 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%), inset 0 0 0 4px #050608, inset 0 1px 2px 5px rgb(255 255 255 / 5%), 0 50px 110px -30px rgb(0 0 0 / 95%), 0 0 0 1px rgb(0 0 0 / 70%), 0 0 90px -20px rgb(212 175 55 / 20%); transform: rotateX(8deg) rotateY(-12deg) scale(.93); transform-origin: 60% 50%; transform-style: preserve-3d; transition: transform 1.1s var(--sh-ease-out), box-shadow .6s; }
.sh-demo.is-live .sh-phone { transform: none; }
.sh-phone__btn { position: absolute; top: -3px; left: 18%; width: 12%; height: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #262a31, #3a3f48, #262a31); }
.sh-phone__cam { position: absolute; left: 1.05%; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2d3a52, #06070a 60%); box-shadow: 0 0 0 2px #0b0c0f; }
.sh-phone__screen { position: relative; overflow: hidden; aspect-ratio: 844 / 390; border-radius: 4.8% / 10.4%; background: #030405; box-shadow: 0 0 0 1px rgb(0 0 0 / 80%); }
.sh-phone__tag { position: absolute; z-index: 3; top: 12px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px; background: rgb(7 8 10 / 62%); backdrop-filter: blur(6px); color: var(--sh-fg); font: 600 10px/1 var(--sh-font-mono); letter-spacing: .16em; pointer-events: none; transition: opacity .5s .8s; }
.sh-demo.is-online .sh-phone__tag { opacity: 0; }
.sh-phone__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sh-red); box-shadow: 0 0 10px var(--sh-red); }
html[data-tier="full"] .sh-demo.is-in .sh-phone__dot { animation: c-blink 2.4s ease-in-out infinite; }
@keyframes c-blink { 50% { opacity: .35; } }
.sh-phone__poster { position: absolute; inset: 0; }
.sh-phone__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: saturate(1.08) contrast(1.04); }
.sh-phone__poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 58%, rgb(7 8 10 / 12%), rgb(7 8 10 / 72%)), linear-gradient(180deg, transparent 40%, rgb(7 8 10 / 55%)); }
.sh-phone__glare { position: absolute; inset: -40% -20%; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 9%) 46%, transparent 54%); transform: translateX(-30%); }
html[data-tier="full"] .sh-demo.is-in .sh-phone__glare { animation: c-glare 7s ease-in-out infinite; }
@keyframes c-glare { 0%, 55% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }
.sh-phone__cta { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.sh-phone__play { min-height: 56px; padding: 0 30px; font-size: 17px; box-shadow: inset 0 1px rgb(255 255 255 / 40%), 0 0 0 8px rgb(212 175 55 / 12%), 0 18px 50px -12px rgb(229 198 92 / 90%); }
html[data-tier="full"] .sh-demo.is-in .sh-phone__play { animation: c-halo 2.8s ease-in-out infinite; }
@keyframes c-halo { 50% { box-shadow: inset 0 1px rgb(255 255 255 / 40%), 0 0 0 14px rgb(212 175 55 / 5%), 0 18px 60px -10px rgb(229 198 92 / 100%); } }
.sh-phone__cur { padding: 5px 10px; border-radius: 999px; background: rgb(7 8 10 / 55%); color: var(--sh-fg-2); font: 500 12px/1.3 var(--sh-font-mono); letter-spacing: .06em; }
.sh-phone__cur span { color: var(--sh-gold-hi); }
.sh-phone__frame { position: absolute; left: 0; top: 0; z-index: 2; width: 844px; height: 390px; border: 0; background: #000; transform: scale(var(--c-scale, 1)); transform-origin: 0 0; }
.sh-demo__pool { position: absolute; left: 8%; right: 8%; bottom: 0; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, var(--c-pool, rgb(212 175 55 / 30%)), transparent); filter: blur(6px); transition: background .5s; }
.sh-demo[data-demo-pulse="clean"] .sh-phone { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%), inset 0 0 0 4px #050608, 0 50px 110px -30px rgb(0 0 0 / 95%), 0 0 120px -10px rgb(229 198 92 / 60%); }
.sh-demo[data-demo-pulse="bust"] .sh-phone { box-shadow: inset 0 0 0 1px rgb(255 120 130 / 40%), inset 0 0 0 4px #050608, 0 50px 110px -30px rgb(0 0 0 / 95%), 0 0 120px -10px rgb(226 59 77 / 65%); }
.sh-demo[data-demo-pulse="cashout"] .sh-phone { box-shadow: inset 0 0 0 1px rgb(127 240 224 / 40%), inset 0 0 0 4px #050608, 0 50px 110px -30px rgb(0 0 0 / 95%), 0 0 140px -10px rgb(95 212 196 / 60%); }
.sh-demo[data-demo-pulse="bust"] .sh-demo__pool { --c-pool: rgb(226 59 77 / 42%); }
.sh-demo[data-demo-pulse="cashout"] .sh-demo__pool { --c-pool: rgb(95 212 196 / 40%); }
.sh-phone__pop { position: absolute; z-index: 5; left: 50%; top: 4%; transform: translate(-50%, 0); padding: 4px 16px 8px; border-radius: 14px; background: rgb(7 8 10 / 72%); color: var(--sh-gold-hi); font: 400 clamp(30px, 3.4vw, 50px)/1 var(--sh-font-num); text-shadow: 0 0 24px rgb(229 198 92 / 70%); pointer-events: none; animation: c-pop 1.8s var(--sh-ease-out) both; }
.sh-phone__pop.is-cashout { color: var(--sh-teal); text-shadow: 0 0 24px rgb(95 212 196 / 70%); font-family: var(--sh-font-mono); font-size: clamp(20px, 2vw, 28px); padding: 10px 16px; }
@keyframes c-pop { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.7); } 18% { opacity: 1; transform: translate(-50%, -8px) scale(1.06); } 70% { opacity: 1; transform: translate(-50%, -22px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(.96); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-tier="still"]) .sh-demo__rig { animation: c-rig linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes c-rig { from { opacity: .2; transform: translateY(90px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---- log, follow-up, restart ---- */
.sh-demo__log { min-height: 118px; padding: 14px 16px; border: 1px solid var(--sh-line); border-radius: 12px; background: linear-gradient(180deg, rgb(13 15 19 / 78%), rgb(7 8 10 / 70%)); backdrop-filter: blur(10px); font: 500 12px/1.9 var(--sh-font-mono); letter-spacing: .1em; color: var(--sh-fg-2); }
.sh-demo__line { position: relative; padding-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-demo__line::before { content: ""; position: absolute; left: 2px; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.sh-demo__line:last-child { color: var(--sh-fg); }
.sh-demo__line.is-gold { color: var(--sh-gold-hi); }
.sh-demo__line.is-teal { color: var(--sh-teal); }
.sh-demo__line.is-red { color: #ff7b89; }
.sh-demo__line.is-idle { color: var(--sh-fg-3); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-tier="still"]) .sh-demo__line:last-child:not(.is-idle) { animation: c-type .5s steps(24, end) both; }
}
.sh-demo__follow a, .sh-demo__alt a { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; color: var(--sh-gold-hi); font-weight: 600; text-decoration: none; }
.sh-demo__follow a:hover, .sh-demo__alt a:hover { text-decoration: underline; }
.sh-demo__alt a { color: var(--sh-fg-2); font-weight: 500; }
.sh-demo__restart { justify-self: start; min-height: 44px; padding: 0 16px; border: 1px solid rgb(212 175 55 / 55%); border-radius: 999px; background: rgb(212 175 55 / 8%); color: var(--sh-gold-hi); font: 600 13px/1.2 var(--sh-font-sans); cursor: pointer; text-align: left; }

/* ---- theatre mode (phones) ---- */
html.has-theatre, html.has-theatre body { overflow: hidden; }
.sh-theatre { position: fixed; inset: 0; z-index: 400; background: #000; }
.sh-theatre__screen { position: absolute; inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.sh-theatre .sh-phone__frame { width: 100%; height: 100%; transform: none; }
.sh-theatre__close { position: absolute; z-index: 3; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; background: rgb(7 8 10 / 76%); color: var(--sh-fg); font: 600 13px/1 var(--sh-font-sans); cursor: pointer; }

@media (max-width: 1023px) {
  .sh-demo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rig" "side" "hud" "cta"; }
  html body .sh-demo .sh-cbeat__hud { justify-self: start; align-items: flex-start; text-align: left; }
}
@media (max-width: 767px) {
  .sh-demo { min-height: 0; gap: 20px; }
  .sh-demo__rig { perspective: 900px; padding-bottom: 26px; }
  .sh-phone { width: 100%; padding: 2.4% 3.4%; transform: rotateX(6deg) rotateY(-6deg); }
  .sh-phone__tag { top: 8px; left: 10px; padding: 4px 8px; font-size: 8px; }
  .sh-phone__play { min-height: 48px; padding: 0 22px; font-size: 15px; }
  .sh-phone__cur { display: none; }
  .sh-demo .sh-cbeat__hud .sh-hud__line:not(.is-key) { display: none; }
  .sh-demo__log { min-height: 96px; font-size: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sh-demo { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "head rig" "cta rig" "side hud"; gap: 14px 24px; }
  .sh-demo .sh-cbeat__body { display: none; }
  .sh-phone { width: min(100%, calc(62svh * 2.02)); }
  .sh-demo__log { min-height: 0; }
  .sh-demo .sh-cbeat__hud .sh-hud__line:not(.is-key) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-phone { transition: none; }
  .sh-demo[data-demo-pulse] .c-wash { animation: none; opacity: .5; }
}