/* Native Home and player pixels, presented as one automatic visual story. */
.puck-try__modes { justify-content: center; }
.puck-try__mode { position: relative; overflow: hidden; }
.puck-try__mode[aria-pressed="true"]::after { content:""; position:absolute; bottom:0; left:0; width:var(--story-progress,0%); height:3px; background:var(--puck-blue); transition:width .1s linear; }
.puck-story__home { position:relative;width:100%;filter:drop-shadow(0 20px 24px #0005); }
.puck-story__home-canvas, .puck-story__player-canvas { position:absolute; left:0; top:0; transform-origin:top left; }
.puck-story__frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.puck-story__player { position:absolute;z-index:3;filter:drop-shadow(0 18px 28px #0009); }
.puck-story__player[hidden] { display:none; }
.puck-story__gameplay { position:absolute; object-fit:contain; background:#000; image-rendering:pixelated; mask-mode:alpha; mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }
.has-native-story .puck-try__figure { position:relative; }
.has-native-story .puck-try__svg { filter:drop-shadow(0 12px 14px #0007); }
.has-native-story .puck-try__tile { pointer-events:none; }
.puck-story__caption { margin:0; text-align:center; font-size:clamp(.85rem,1.5vw,1rem); line-height:1.5; color:var(--puck-ink); flex:1; }
.puck-try__transport { justify-content:center; position:relative; margin-top:.9rem; min-height:44px; gap:.5rem; }
.puck-story__pause { position:absolute; right:0; width:44px; height:44px; background:transparent; color:var(--puck-muted); border:1px solid var(--puck-line); border-radius:50%; cursor:pointer; display:grid;place-items:center;padding:0; }
.puck-story__pause .icon { width:20px;height:20px;fill:currentColor; }
.puck-story__pause:hover { color:var(--puck-ink);border-color:var(--puck-blue); }
.puck-try__note { margin-top:.5rem; }
.puck-story__cursor { position:absolute; z-index:8; width:38px; height:46px; opacity:0; pointer-events:none; filter:drop-shadow(0 3px 3px #0008); transform:translate(45px,28px); transition:left .55s,top .55s,transform .55s,opacity .2s; }
.puck-story__cursor svg { display:block; width:100%; }
.puck-story__cursor.is-visible { opacity:1; transform:translate(0,0); }
.puck-story__cursor i { position:absolute; left:-10px; top:-10px; border-radius:50%; width:26px; height:26px; border:3px solid #bde2ff; opacity:0; }
.puck-story__cursor.is-clicking i { animation:puck-story-click 1s .65s both; }
.puck-story__touch { position:absolute; z-index:8; width:15px; height:15px; border:2px solid white; background:#bde2ff66; border-radius:50%; pointer-events:none; opacity:0; left:48%; top:6%; box-shadow:0 0 0 4px #bde2ff33; }
.puck-story__touch.is-swipe { animation:puck-story-swipe .85s both; }
.puck-story__touch.is-tap { left:21%; top:28%; animation:puck-story-tap .6s both; }
.puck-story__chooser { opacity:0; pointer-events:none; transition:opacity .25s; }
.puck-story__chooser.is-visible { opacity:1; }
.puck-story__choices { box-sizing:border-box; width:268px; height:202px; background:#111820; color:#e7edf4; padding:16px 12px; font-family:var(--font-mono); }
.puck-story__choices>span { font-size:10px; letter-spacing:1px; color:#a9b7c8; }
.puck-story__choices>div { display:flex; gap:8px; margin-top:14px; align-items:flex-start; }
.puck-story__choices figure { margin:0; width:76px; padding:4px; border-radius:6px; border:2px solid transparent; }
.puck-story__choices figure.is-selected { background:#253b58; border-color:#82baff; }
.puck-story__choices img { width:100%; height:76px; object-fit:contain; }
.puck-story__choices figcaption { font-size:8px; margin-top:6px; line-height:1.3; }
.puck-story__choices p { font-size:9px; color:#a9b7c8; margin-top:14px; }
@keyframes puck-story-click { 0%,40% {opacity:0;transform:scale(.35);} 65% {opacity:1;} 100% {opacity:0;transform:scale(1.7);} }
@keyframes puck-story-swipe { 0% {opacity:0;transform:translateY(-4px);} 20% {opacity:1;} 80% {opacity:1;transform:translateY(70px);} 100% {opacity:0;transform:translateY(80px);} }
@keyframes puck-story-tap { 0% {opacity:0;transform:scale(1.4);} 40% {opacity:1;transform:scale(.8);} 100% {opacity:0;transform:scale(1.4);} }
@media(max-width:599px) {

 .puck-story__cursor { width:29px; height:35px; }
 .puck-try__modes { gap:.45rem; margin:1rem 0; }
 .puck-try__mode { padding:.7rem .9rem; font-size:.7rem; }
 .puck-story__caption { padding:0 34px; font-size:.8rem; min-height:2.5em; }
 .puck-story__pause { width:36px; height:44px; border:0; }
}
@media(prefers-reduced-motion:reduce) {
 .puck-story__player,.puck-story__cursor,.puck-story__touch,.puck-story__cursor i { animation:none!important; transition:none!important; }
 .puck-story__home,.puck-story__chooser { transition:none; }
}
/* Each device owns a grid track, so its growth cannot cover player controls. */
/* Keep the page's section spacing on both sides of the divider. */
.puck-try { --puck-section-space:clamp(5rem,8vw,8rem); padding:var(--puck-section-space) 0; }
.puck-try .puck-editorial-head { padding-top:var(--puck-section-space); border-top:1px solid var(--puck-line); gap:2rem; margin-bottom:2.5rem; }
.puck-try .puck-editorial-head h2 { font-size:clamp(1.8rem,2.6vw,2.2rem); margin-top:.75rem; }
.puck-try .puck-editorial-head>p { font-size:1rem; max-width:45ch; }
.puck-try__modes { margin:1.2rem 0; }
.puck-try__stage.has-native-story {
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26%);align-items:center;
 gap:clamp(20px,3vw,40px);width:min(100%,1160px);margin-inline:auto;
 height:auto;min-height:0;padding:24px 8px 32px;background:transparent;border:0;box-shadow:none;
 overflow:visible;
}
.puck-try__stage.has-native-story::after { display:none; }
.has-native-story .puck-try__mac,.has-native-story[data-mode="handheld"] .puck-try__mac {
 grid-column:1;grid-row:1;position:relative;width:100%;max-width:820px;min-width:0;
 transform:none;margin:0;transition:none;opacity:1;filter:none;
}
.puck-story__home { transition:filter .35s ease; }
.is-playing .puck-story__home { filter:brightness(.85) saturate(.9) drop-shadow(0 20px 24px #0005); }
.has-native-story[data-focus="chooser"] .puck-story__home { filter:brightness(.72) drop-shadow(0 20px 24px #0005); }
.puck-story__player { width:76%;max-width:640px;left:50%;right:auto;top:72px;transform:translateX(-50%);animation:puck-story-centered-open .3s ease; }
@keyframes puck-story-centered-open { from {opacity:0;transform:translateX(-50%) translateY(8px) scale(.97);} to {opacity:1;transform:translateX(-50%);} }
.has-native-story .puck-try__device,.has-native-story[data-mode="handheld"] .puck-try__device {
 grid-column:2;grid-row:1;justify-self:center;align-self:center;order:initial;position:relative;
 left:auto;bottom:auto;width:min(100%,220px);margin:0;transform:none;
 transition:width .4s ease;
}
.has-native-story[data-focus="chooser"] .puck-try__device,
.has-native-story[data-focus="handoff"] .puck-try__device { width:min(100%,300px); }
.puck-story__touch.is-pick { animation:puck-story-tap .7s .6s both; }
@media(max-width:900px) {
 .puck-try__stage.has-native-story { grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:0;max-width:680px; }
 /* Reserve the smaller device's footprint once. Larger states grow upward. */
 .puck-try__stage.has-native-story::before { content:"";display:block;grid-column:1;grid-row:2;justify-self:center;width:min(72%,260px);aspect-ratio:330/430;margin-top:20px;pointer-events:none; }
 .has-native-story .puck-try__mac,.has-native-story[data-mode="handheld"] .puck-try__mac { grid-column:1;grid-row:1; }
 .has-native-story .puck-try__device,.has-native-story[data-mode="handheld"] .puck-try__device { position:absolute;grid-column:auto;grid-row:auto;left:50%;bottom:32px;transform:translateX(-50%);width:min(84%,300px);margin:0;z-index:4; }
 .has-native-story[data-focus="chooser"] .puck-try__device,.has-native-story[data-focus="handoff"] .puck-try__device { width:min(94%,340px); }
}
@media(max-width:599px) {
 .puck-try .puck-editorial-head { gap:.5rem; }
 .puck-try .puck-editorial-head h2 { font-size:1.8rem; }
 .puck-try .puck-editorial-head>p { font-size:.9rem; }
 .puck-try__stage.has-native-story { padding:.7rem 0 0;gap:0; }
 .puck-story__player { width:94%;top:26px; }
 .has-native-story .puck-try__device,.has-native-story[data-mode="handheld"] .puck-try__device { width:min(84%,300px);bottom:0; }
 .has-native-story[data-focus="chooser"] .puck-try__device,.has-native-story[data-focus="handoff"] .puck-try__device { width:min(94%,340px); }
}
@media(prefers-reduced-motion:reduce) { .has-native-story .puck-try__device { transition:none; } }

/* Original gameplay sits behind the complete native window chrome. */
.puck-story__player-canvas > .puck-story__gameplay { z-index:0; }
.puck-story__player-canvas > .puck-story__frame { z-index:1; }

/* The handheld takes the foreground while the Mac is idle. */
@media(max-width:900px) {
 .has-native-story[data-focus="mac"] .puck-try__device,
 .has-native-story[data-focus="home"] .puck-try__device { width:min(72%,260px);margin:0; }
}