/* Three gameplay examples, each paired with its cover and preferred input. */
.puck-play{--play-signal:#e2c27a;--play-art-height:106px}
.puck-play__inner{padding-block:clamp(3.5rem,6vw,6rem)}
.puck-play__header{margin-bottom:2.5rem}
[data-app="puck"] .puck-play .puck-play__header h2{max-width:none;margin:.75rem 0 0;font-size:clamp(3rem,5vw,4.4rem)}
.puck-play__scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.puck-play__scene{min-width:0}
.puck-play__scene h3{font:300 clamp(1.4rem,2.1vw,1.8rem)/1.2 var(--font-display);letter-spacing:-.025em;color:var(--puck-controls-ink);margin:0 0 1.2rem}
.puck-play__frame{overflow:hidden;border:1px solid #9eb3c04a;border-radius:9px;background:#111b22;box-shadow:0 12px 28px #0003}
.puck-play__bar{height:28px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 10px;background:#26313a;color:#cbd5dc;font:500 12px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif}
.puck-play__window-title{min-width:0;line-height:1.25}
.puck-play__bar{min-height:28px;height:auto;padding-top:6px;padding-bottom:6px}
.puck-play__lights{display:flex;gap:5px;flex:none}
.puck-play__lights i{width:7px;height:7px;border-radius:50%;background:#d87570}
.puck-play__lights i:nth-child(2){background:#d3b264}.puck-play__lights i:nth-child(3){background:#7aa482}
.puck-play__crt{position:relative;isolation:isolate;overflow:hidden;background:#101d24}
.puck-play__crt canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;filter:blur(.32px) saturate(1.06);cursor:pointer}
.puck-play__crt::before,.puck-play__crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.puck-play__crt::before{background:repeating-linear-gradient(0deg,#0000 0 2px,#0003 2px 3px,#0000 3px 4px);opacity:.65}
.puck-play__crt::after{background:radial-gradient(ellipse at center,#0000 40%,#07101850 100%),repeating-linear-gradient(90deg,#ff300005 0 1px,#50ff5004 1px 2px,#3080ff06 2px 3px);box-shadow:inset 0 0 12px #0003}
.puck-play__objects{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;gap:28px;height:var(--play-art-height);margin-top:18px;perspective:700px}
.puck-play__objects::before{content:"";position:absolute;z-index:-1;inset:9px -4px 7px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);background:linear-gradient(180deg,#a7bdc206,#9aadb617 75%,#829ead05);border-bottom:0;pointer-events:none}
.puck-play__case{display:block;flex:none;width:100px;height:106px;object-fit:contain;transform:perspective(280px) rotateX(32deg) scale(1.12);transform-origin:center 60%;filter:drop-shadow(0 2px 2px #0007)}
.puck-play__input{appearance:none;border:0;background:none;padding:0;width:180px;height:106px;flex:none;color:var(--puck-controls-ink);cursor:pointer;transition:transform .18s}
.puck-play__input:hover{transform:none}
.puck-play__input:focus-visible{outline:2px solid var(--play-signal);outline-offset:6px;border-radius:8px}
.puck-play__input .puck-control-choice__art{display:flex;align-items:center;justify-content:center;width:180px;height:106px;margin:0;filter:drop-shadow(0 2px 2px #0007)}
/* A visible lower edge makes the handheld and keyboard sit on the same plane as the pad. */
.puck-play__input .puck-control-handheld{position:relative;display:block;aspect-ratio:2;width:168px;height:84px;transform:perspective(280px) rotateX(42deg);transform-origin:center 60%;isolation:isolate}
.puck-play__input .puck-control-handheld::before{content:"";position:absolute;inset:1px 0 -3px;border-radius:18px;background:linear-gradient(#414548,#141a1d);border-bottom:1px solid #75808960;z-index:-1}
.puck-play__input .puck-control-handheld>svg{display:block;width:100%;height:100%;position:relative}
.puck-play__input .puck-control-handheld .puck-screen-mark{position:absolute;left:36%;top:26%;width:28%;height:47%;color:#e7edf0;filter:drop-shadow(0 0 3px #bed4db24)}
.puck-play__input .puck-control-keyboard{width:168px;height:72px;padding:6px;gap:2px;border-radius:6px;transform:perspective(280px) rotateX(42deg);transform-origin:center 60%;box-shadow:0 3px 0 #5f686a,0 4px 0 #273138,0 2px 3px #0004}
.puck-play__input .puck-control-keyboard__row{flex:1;min-height:0;gap:2px}
.puck-play__input .puck-control-keyboard__key{min-height:0;font:4px/1.2 var(--font-mono);border-radius:2px;box-shadow:0 1px 0 #77827e}
.puck-play__input .puck-control-keyboard__arrows .puck-control-keyboard__key{font-size:4px}
.puck-play__input .puck-control-stick{width:168px;height:auto}
.puck-play__caption{text-align:center;margin-top:17px;min-height:54px}
[data-app="puck"] .puck-play .puck-play__caption p{max-width:none;margin:0;font:300 clamp(1rem,1.5vw,1.25rem)/1.4 var(--font-display);color:var(--puck-controls-muted)}
.puck-play__testing{display:inline-block;color:var(--play-signal);border:1px solid #e2c27a60;border-radius:3px;font:.5rem/1.5 var(--font-mono);padding:2px 5px;margin-top:10px}
.puck-play__footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-top:1px solid #c0d1db25;padding-top:1.5rem;margin-top:2.75rem}
[data-app="puck"] .puck-play .puck-play__footer p{margin:0 0 .65rem;max-width:none;font:300 1.3rem/1.5 var(--font-display);color:var(--puck-controls-muted)}
.puck-play__footer>div>span{display:block;font:.56rem/1.7 var(--font-mono);color:var(--puck-controls-muted)}
.puck-play[data-motion="playing"] [data-input="controller"] .puck-control-stick__lever{animation:puck-stick-lean 2.4s ease-in-out infinite}
@media(min-width:951px) and (max-width:1180px){.puck-play__scenes{gap:1.4rem}.puck-play__case{width:90px}.puck-play__input,.puck-play__input .puck-control-choice__art{width:160px}.puck-play__input .puck-control-keyboard{width:148px;height:64px}.puck-play__input .puck-control-handheld{width:148px;height:74px}.puck-play__input .puck-control-stick{width:148px}.puck-play__objects{gap:26px}}
@media(max-width:950px){.puck-play__scenes{grid-template-columns:1fr;gap:2.8rem;max-width:620px;margin:auto}.puck-play__header,.puck-play__footer{max-width:620px;margin-inline:auto}.puck-play__scene h3{font-size:1.6rem}.puck-play__caption{min-height:0}.puck-play__objects{margin-top:20px}.puck-play__footer{margin-top:2.4rem}}
@media(max-width:520px){.puck-play__inner{padding-block:3rem}.puck-play__header{margin-bottom:2rem}.puck-play__scenes{gap:2.7rem}.puck-play__objects{gap:24px;margin-top:17px}.puck-play__objects::before{inset:9px 0 7px}.puck-play__case{width:88px}.puck-play__input,.puck-play__input .puck-control-choice__art{width:156px}.puck-play__input .puck-control-keyboard{width:148px;height:64px}.puck-play__input .puck-control-handheld{width:148px;height:74px}.puck-play__input .puck-control-stick{width:148px}.puck-play__caption{margin-top:15px}[data-app="puck"] .puck-play .puck-play__caption p{font-size:1.15rem}.puck-play__footer{align-items:flex-start}.puck-play__footer>div>span{font-size:.5rem}[data-app="puck"] .puck-play .puck-play__footer p{font-size:1.1rem}.puck-play .puck-controls__motion{min-width:40px;min-height:40px}}
@media(max-width:360px){.puck-play__case{width:80px}.puck-play__input,.puck-play__input .puck-control-choice__art{width:144px}.puck-play__input .puck-control-keyboard{width:136px;height:60px}.puck-play__input .puck-control-handheld{width:136px;height:68px}.puck-play__input .puck-control-stick{width:136px}.puck-play__objects{gap:22px}}
@media(prefers-reduced-motion:reduce){.puck-play__input{transition:none}.puck-play__input:hover{transform:none}.puck-play__input .puck-control-stick__lever{animation:none!important}}