/* Shatterpoint's fractured world, using the original campaign art. */
html.blockgames-document { scroll-padding-top:calc(var(--header-height) + var(--bg-chapter-height,3.75rem) + 12px); }
.bg-main { min-width:0; }
.bg-main .section-shell { max-width:1400px; }
.bg-main h1,.bg-main h2,.bg-main h3,.bg-next strong { overflow-wrap:anywhere; }
.bg-main h2 { font:500 clamp(2rem,3.8vw,3.5rem)/1.12 var(--display); letter-spacing:-.035em; text-wrap:balance; }
.bg-main em { color:var(--accent); font-style:normal; }
.bg-main .eyebrow { color:var(--muted); font-size:.75rem; margin-bottom:18px; }
.bg-main [id] { scroll-margin-top:0; }
.bg-opening { padding-block:24px 20px; }
.bg-topline { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px; font-size:.8125rem; color:var(--muted); }
.bg-topline>a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--ink); }
.bg-topline>a>span { color:var(--accent); }
.bg-inline { min-height:44px; display:inline-flex; align-items:center; gap:24px; color:var(--accent); font-size:.8125rem; }
.bg-inline>span { font-size:1.25rem; }
.bg-inline:hover { color:var(--ink); }
.bg-intro { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:40px; padding-block:68px 82px; --light-x:65%; --light-y:50%; }
.bg-intro::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at var(--light-x) var(--light-y),#8638b923,transparent 65%); }
.bg-intro h1 { font:500 clamp(3rem,5.7vw,5.4rem)/1.05 var(--display); letter-spacing:-.035em; text-wrap:balance; }
.bg-intro header>p:not(.eyebrow) { font-size:1rem; line-height:1.7; color:var(--muted); margin-top:24px; }
.bg-intro .bg-inline { margin-top:20px; }
.bg-world { position:relative; min-width:0; padding-block:24px; }
.bg-world-art { display:block; position:relative; transform:rotate(-3deg); border:1px solid #b697ff70; background:#12051f; box-shadow:0 24px 60px #000a,0 0 60px #b151ff12; transition:border-color .25s,transform .4s; }
.bg-world-art:hover { border-color:var(--accent); transform:rotate(-1deg); }
.bg-world figcaption { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 16px; margin-top:24px; font-size:.6875rem; color:var(--muted); }
.bg-world figcaption a,.bg-art figcaption a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--accent); }
.bg-fragments { position:absolute; inset:-25px -16px; pointer-events:none; overflow:hidden; }
.bg-fragments i { position:absolute; background:linear-gradient(130deg,#b697ff55,#792eac0d 65%); }
.bg-fragments i:nth-child(1) { width:42%; height:42%; left:1%; top:0; clip-path:polygon(5% 0,100% 30%,40% 100%); }
.bg-fragments i:nth-child(2) { width:26%; height:64%; right:0; top:8%; clip-path:polygon(40% 0,100% 65%,0 100%); }
.bg-fragments i:nth-child(3) { width:60%; height:28%; left:10%; bottom:0; clip-path:polygon(0 65%,90% 0,100% 100%); opacity:.5; }
.bg-fragments i:nth-child(4) { width:8%; height:12%; left:6%; bottom:24%; clip-path:polygon(25% 0,100% 70%,0 100%); opacity:.4; }
.bg-intro[data-world-ready] .bg-fragments i { animation:bg-world-light 7s ease-in-out infinite alternate; }
.bg-intro[data-world-ready] .bg-fragments i:nth-child(2) { animation-delay:-3s; }
@keyframes bg-world-light { to { opacity:.2; } }
.bg-intro.is-paused *,.bg-intro.is-offscreen * { animation-play-state:paused!important; }
.bg-crop { position:relative; width:100%; overflow:hidden; border-radius:4% / 7%; background:#12051f; }
.bg-crop>img { position:absolute; width:var(--crop-width); max-width:none; height:auto; left:var(--crop-left); top:var(--crop-top); }
.bg-opening-end { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px 32px; padding-block:24px 6px; border-top:1px solid var(--line); }
.bg-credits { display:flex; flex-wrap:wrap; gap:24px 48px; margin:0; }
.bg-credits dt { color:var(--muted); font-size:.6875rem; margin-bottom:7px; }
.bg-credits dd { margin:0; font-size:.8125rem; }
.bg-motion { display:flex; align-items:center; gap:10px; color:var(--muted); background:transparent; min-height:44px; padding:8px; font-size:.6875rem; }
.bg-motion:hover { color:var(--ink); }
.bg-motion>span:first-child { color:var(--accent); }
.bg-chapters { position:sticky; top:var(--header-height); z-index:30; background:#07070af5; border-block:1px solid var(--line); backdrop-filter:blur(14px); }
.bg-chapters>div { display:flex; flex-wrap:wrap; align-items:center; gap:0 36px; padding-block:0; }
.bg-chapters a { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:60px; font-size:.8125rem; color:var(--muted); }
.bg-chapters a>span { color:var(--accent); font-size:.6875rem; }
.bg-chapters a:last-child { margin-left:auto; }
.bg-chapters a[aria-current],.bg-chapters a:hover { color:var(--ink); }
.bg-chapters a[aria-current]::after { content:''; position:absolute; height:2px; background:var(--accent); inset:auto 0 -1px; }
.bg-role { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:80px; padding-block:72px; }
.bg-remit { color:var(--muted); font-size:1rem; line-height:1.75; max-width:52ch; margin-top:22px; }
.bg-role .bg-inline { margin-top:12px; }
.bg-outcomes { align-self:start; padding-left:36px; border-left:1px solid #b697ff47; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
.bg-outcomes strong { display:block; font:500 clamp(3rem,5.5vw,5.5rem)/1.05 var(--display); letter-spacing:-.035em; color:var(--accent); }
.bg-outcomes>div:nth-child(2)>strong { font-size:clamp(2rem,3vw,3rem); }
.bg-outcomes>div>p { margin-top:10px; font-size:.8125rem; overflow-wrap:anywhere; }
.bg-source-note { color:var(--muted); font-size:.75rem; line-height:1.7; max-width:44ch; }
.bg-journey { padding-block:48px 64px; border-block:1px solid var(--line); container-type:inline-size; }
.bg-section-head { display:flex; justify-content:space-between; align-items:end; gap:32px; }
.bg-section-head>p { font-size:.875rem; line-height:1.6; color:var(--muted); }
.bg-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-block:40px 32px; }
.bg-controls button { position:relative; display:flex; align-items:center; gap:14px; text-align:left; min-width:0; min-height:84px; padding:14px 18px 14px 0; color:var(--muted); background:transparent; border-block:1px solid var(--line); }
.bg-controls button>span:last-child { min-width:0; overflow-wrap:anywhere; }
.bg-controls button:not(:first-child) { padding-left:24px; }
.bg-controls button::after { content:''; position:absolute; height:2px; inset:auto 0 -1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.bg-controls button[aria-selected=true]::after { transform:scaleX(1); }
.bg-controls button[aria-selected=true],.bg-controls button:hover { color:var(--ink); }
.bg-step { font-size:.6875rem; font-variant-numeric:tabular-nums; color:var(--accent); }
.bg-controls strong { display:block; font:500 1.375rem/1.2 var(--display); letter-spacing:-.025em; }
.bg-controls small { display:block; font-size:.6875rem; line-height:1.5; margin-top:6px; }
.bg-scenes { min-width:0; margin-top:32px; }
.bg-scene { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:48px; min-width:0; align-items:start; }
.bg-scene+.bg-scene { margin-top:48px; padding-top:40px; border-top:1px solid var(--line); }
.bg-enhanced .bg-scenes { display:grid; grid-template-columns:minmax(0,1fr); overflow-anchor:none; margin-top:0; }
.bg-enhanced .bg-scene { grid-area:1/1; align-self:start; margin:0; padding:0; border:0; }
.bg-enhanced .bg-scene[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.bg-art,.bg-scene-copy { min-width:0; }
.bg-art-tools { display:flex; justify-content:end; gap:4px; margin-bottom:12px; }
.bg-art-tools button { min-height:44px; padding:8px 16px; background:transparent; color:var(--muted); border:1px solid transparent; font-size:.75rem; }
.bg-art-tools button[aria-pressed=true] { border-color:var(--line); color:var(--ink); background:#b697ff0b; }
.bg-art-tools button:hover { color:var(--ink); }
.bg-image-stage { aspect-ratio:16/10; padding:16px; display:grid; align-items:center; background:radial-gradient(ellipse at 60% 60%,#471a5920,transparent 70%),#0c0910; border:1px solid #b697ff38; }
.bg-detail,.bg-full { min-width:0; grid-area:1/1; }
.bg-full { height:100%; min-height:0; }
.bg-full img { width:100%; height:100%; object-fit:contain; }
.bg-art figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; padding-top:6px; color:var(--muted); font-size:.6875rem; }
.bg-scene-copy { padding-top:62px; }
.bg-scene-copy h3 { font:500 clamp(1.875rem,2.8vw,2.5rem)/1.15 var(--display); letter-spacing:-.035em; text-wrap:balance; }
.bg-scene-copy>p:not(.eyebrow) { font-size:.9375rem; color:var(--muted); line-height:1.75; margin-top:18px; }
.bg-related { margin-top:24px; border-block:1px solid var(--line); }
.bg-related summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px; list-style:none; cursor:pointer; font-size:.8125rem; }
.bg-related summary::-webkit-details-marker { display:none; }
.bg-disclosure { font-size:1.4rem; color:var(--accent); }
.bg-related[open] .bg-disclosure { transform:rotate(45deg); }
.bg-related>div { padding-bottom:8px; }
.bg-related a { display:flex; align-items:center; gap:12px; min-height:66px; padding-block:8px; font-size:.8125rem; line-height:1.5; color:var(--muted); }
.bg-related a:hover { color:var(--ink); }
.bg-related a>img { width:48px; height:48px; flex-shrink:0; object-fit:contain; border:1px solid var(--line); }
.bg-related a>span:last-child { margin-left:auto; color:var(--accent); flex-shrink:0; }
.bg-record-note { max-width:92ch; color:var(--muted); font-size:.75rem; line-height:1.7; margin-top:32px; }
.bg-media-status { padding:20px; min-height:120px; display:flex; align-items:center; color:var(--muted); line-height:1.7; font-size:.875rem; }
.bg-crop .bg-media-status { position:absolute; inset:0; }
.bg-crop.bg-image-failed { aspect-ratio:auto!important; min-height:180px; border-radius:0; }
.bg-crop.bg-image-failed .bg-media-status { position:static; }
.bg-collection { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:64px; }
.bg-collection p:not(.eyebrow) { font-size:.9375rem; line-height:1.75; color:var(--muted); margin-top:18px; }
.bg-button { min-height:52px; gap:32px; flex-shrink:0; }
.bg-handoff { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:80px; padding-block:64px; border-top:1px solid var(--line); }
.bg-handoff>div>.bg-inline { margin-top:24px; }
.bg-next { padding-left:32px; border-left:1px solid #b697ff47; display:flex; flex-direction:column; align-items:start; justify-content:center; }
.bg-next>.eyebrow { margin-bottom:14px; }
.bg-next>strong { font:500 clamp(1.5rem,2.8vw,2.5rem)/1.2 var(--display); letter-spacing:-.035em; }
.bg-next>.bg-inline { margin-top:16px; }
.bg-end { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; border-top:1px solid var(--line); padding-block:16px 32px; font-size:.75rem; color:var(--muted); }
.bg-end>span>span { color:var(--muted); }
.bg-end>div { display:flex; flex-wrap:wrap; gap:8px 28px; }
.bg-end a { display:inline-flex; align-items:center; min-height:44px; }
html.blockgames-document:not(.js-ready) { scroll-padding-top:12px; }
.blockgames-document:not(.js-ready) .blockgames-page .site-header.reader-header { position:relative; height:auto; flex-wrap:wrap; }
.blockgames-document:not(.js-ready) .blockgames-page .site-header.reader-header #main-nav { position:static; flex-direction:row; flex-wrap:wrap; order:3; width:100%; padding:0; max-height:none; background:transparent; border:0; box-shadow:none; }
.blockgames-document:not(.js-ready) .bg-chapters { position:static; }
.blockgames-document:not(.js-ready) .bg-scene-copy { padding-top:0; }
@media(max-width:1100px) { .bg-role,.bg-handoff { gap:48px; } .bg-intro { gap:28px; } .bg-scene { gap:32px; } .bg-controls button:not(:first-child) { padding-left:16px; } }
@media(max-width:900px) {
  .bg-intro { padding-block:48px 56px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .bg-intro h1 { font-size:clamp(2.6rem,5.7vw,4rem); }
  .bg-world-art { transform:rotate(-2deg); }
  .bg-role { padding-block:56px; gap:32px; }
  .bg-outcomes { padding-left:24px; }
  .bg-scene { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; }
  .bg-controls small { font-size:.625rem; }
  .bg-controls strong { font-size:1.125rem; }
}
@media(max-width:600px) {
  .bg-opening { padding-top:16px; }
  .bg-topline { font-size:.75rem; }
  .bg-topline>span { font-size:.6875rem; }
  .bg-intro { display:block; padding-block:30px 24px; }
  .bg-intro h1 { font-size:clamp(2.5rem,10.7vw,3.75rem); letter-spacing:-.035em; }
  .bg-intro header>p:not(.eyebrow) { font-size:.875rem; margin-top:20px; }
  .bg-intro .bg-inline { margin-top:12px; }
  .bg-world { margin-top:20px; padding-block:24px 0; }
  .bg-fragments { inset:0 -12px; }
  .bg-world-art { margin-inline:6px; }
  .bg-world figcaption { margin-top:12px; font-size:.625rem; gap:0 8px; }
  .bg-world figcaption a { font-size:.6875rem; }
  .bg-opening-end { padding-top:20px; gap:12px 24px; }
  .bg-credits { gap:18px 28px; }
  .bg-credits dd { font-size:.75rem; }
  .bg-motion { padding:0; }
  .bg-chapters>div { gap:0 16px; }
  .bg-chapters a { min-height:52px; font-size:.75rem; gap:6px; }
  .bg-chapters a>span { display:none; }
  .bg-role { display:block; padding-block:44px; }
  .bg-remit { font-size:.9375rem; }
  .bg-outcomes { margin-top:32px; padding:24px 0 0; border-left:0; border-top:1px solid var(--line); grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:baseline; }
  .bg-outcomes strong { font-size:clamp(2rem,10.8vw,3rem); }
  .bg-outcomes>div:nth-child(2)>strong { font-size:clamp(1.75rem,8.5vw,2.5rem); }
  .bg-source-note { grid-column:1/-1; }
  .bg-journey { padding-block:40px; }
  .bg-section-head { display:block; }
  .bg-section-head>p { margin-top:18px; font-size:.8125rem; }
  .bg-section-head>p>br { display:none; }
  .bg-controls { grid-template-columns:repeat(2,minmax(0,1fr)); margin-block:24px; gap:0 16px; }
  .bg-controls button,.bg-controls button:not(:first-child) { padding:14px 4px; gap:12px; min-height:76px; }
  .bg-controls button:nth-child(n+3) { border-top:0; }
  .bg-controls strong { font-size:1.125rem; }
  .bg-controls small { font-size:.625rem; }
  .bg-scene { display:block; }
  .bg-art-tools { justify-content:start; }
  .bg-image-stage { padding:10px; }
  .bg-image-stage.is-full { aspect-ratio:auto; }
  .bg-image-stage.is-full .bg-full { height:auto; }
  .bg-image-stage.is-full .bg-full img { height:auto; }
  .bg-scene-copy { padding-top:24px; }
  .bg-scene-copy h3 { font-size:1.875rem; }
  .bg-scene-copy>p:not(.eyebrow) { font-size:.875rem; }
  .bg-record-note { margin-top:24px; }
  .bg-collection { display:block; padding-block:44px; }
  .bg-button { margin-top:24px; }
  .bg-handoff { display:block; padding-block:44px; }
  .bg-next { margin-top:32px; padding:24px 0 0; border-left:0; border-top:1px solid var(--line); }
  .bg-end { padding-block:16px 24px; }
}
@media(prefers-reduced-motion:reduce) { .bg-main * { animation:none!important; transition:none!important; } }
@container (max-width:26rem) { .bg-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:12rem) { .bg-controls { grid-template-columns:minmax(0,1fr); } .bg-controls button:not(:first-child) { border-top:0; } }
@media(forced-colors:active) { .bg-world-art,.bg-image-stage,.bg-art-tools button[aria-pressed=true] { border:1px solid CanvasText; } .bg-fragments { display:none; } .bg-controls button[aria-selected=true] { outline:2px solid Highlight; outline-offset:-3px; } }