/* The free demo only (html.sj-demo, set by space-junk-demo.js when the public build adds the demo script). */

/* The shared demo bar sits in the header beside the back link: never over the tool rack, the touch controls or Launch.
   On phones and short windows the header is a slim bar with no room, so the bar steps aside: the board banner, the
   shift report and the closing card carry the same link. */
.sbg-demo-bar[data-game="space-junk"] { top: 4px; bottom: auto; left: 214px; padding: 4px 6px 4px 12px; gap: 10px; border-radius: 10px; }
.sbg-demo-bar[data-game="space-junk"] a { padding: 7px 12px; }
@media (max-width: 1180px) { .sj-demo .game-header .game-wordmark { visibility: hidden; } }
@media (pointer: coarse), (max-width: 860px), (max-height: 500px) { .sbg-demo-bar[data-game="space-junk"] { display: none; } }

/* the region-mastery banner belongs to the full campaign */
.sj-demo [data-region-payoff-board] { display: none; }

.demo-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; margin: 0 0 1rem; padding: 14px 18px; border: 2px solid #ffd447; border-radius: 14px; background: linear-gradient(135deg, #1b2a3d, #10243a); color: #dce7e8; }
.demo-banner span { color: #ffd447; font-size: var(--sj-label, 12px); font-weight: 900; letter-spacing: .1em; }
.demo-banner strong { display: block; margin: 4px 0 6px; font-size: var(--sj-value, 19px); }
.demo-banner ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 2px; font-size: var(--sj-text, 15px); }
@media (max-width: 860px), (max-height: 500px) { .demo-banner { grid-template-columns: 1fr; } .demo-banner ul { display: none; } }

.demo-hook { z-index: 60; }
.demo-hook-card { width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 18px; align-items: start; }
.demo-hook-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 70% 50%; border-radius: 12px; border: 3px solid #07111f; }
.demo-hook-copy { display: grid; gap: 8px; min-width: 0; }
.demo-hook-card h2 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.demo-hook-card p { margin: 0; }
.demo-hook-card ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 3px; font-weight: 600; }
.demo-hook-card .overlay-actions { margin-top: 6px; }
@media (max-width: 860px), (max-height: 560px) { .demo-hook-card { grid-template-columns: 1fr; } .demo-hook-card img { display: none; } .demo-hook-card ul { font-size: 13px; } }