.play-page{gap:0}.play-shell{padding-block:var(--shell-pad-block);--play-card-pad:clamp(1.1rem, .85rem + .7vw, 1.5rem)}.play-layout{gap:clamp(1.25rem,.9rem + 1.4vw,2rem);display:grid}.play-header{padding:var(--play-card-pad);padding-top:calc(var(--play-card-pad) + .55rem);border:var(--border-strong) solid var(--ink);border-radius:var(--radius-lg);background:var(--panel);box-shadow:5px 5px 0 var(--shadow-ink);position:relative}.play-header .play-header-badges{left:var(--play-card-pad)}.play-header-main{grid-template-columns:clamp(13rem,24vw,19.7rem) minmax(0,1fr);align-items:stretch;gap:clamp(1rem,.6rem + 1.4vw,1.75rem);display:grid}.play-thumb{aspect-ratio:315/250;border:var(--border-strong) solid var(--ink);border-radius:var(--radius-md);background:var(--surface-2);width:100%;box-shadow:3px 3px 0 var(--shadow-ink);align-self:start;display:block;overflow:hidden}.play-thumb img{object-fit:cover;width:100%;height:100%;display:block}.play-header-content{gap:var(--space-sm);flex-direction:column;min-width:0;display:flex}.play-title{max-width:24ch;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.05}.play-lead{max-width:56ch;color:var(--text-soft);font-size:clamp(1rem,.95rem + .3vw,1.1rem);line-height:1.55}.play-icon{vertical-align:-.15em;flex:none;width:1.05em;height:1.05em}.play-header-footer{justify-content:space-between;align-items:flex-end;gap:var(--space-md) var(--space-lg);padding-top:var(--space-md);flex-wrap:wrap;margin-top:auto;display:flex}.play-header-footer .tech-stack{flex:26rem}.play-header-actions{justify-content:flex-end;gap:var(--space-sm);flex-wrap:wrap;flex:none;display:flex}.play-header-actions .btn{min-width:9.5rem}.play-itch-icon{width:1.05rem;height:1.05rem;-webkit-mask:var(--play-itch-logo) center / contain no-repeat;mask:var(--play-itch-logo) center / contain no-repeat;background-color:currentColor;margin-right:.45rem}.play-github-icon{width:1.15rem;height:1.15rem;-webkit-mask:var(--play-github-logo) center / contain no-repeat;mask:var(--play-github-logo) center / contain no-repeat;background-color:currentColor;flex:none;margin-right:.45rem}.play-module{border:var(--border-strong) solid var(--ink);border-radius:var(--radius-lg);box-shadow:6px 6px 0 var(--shadow-ink);background:#08070b;overflow:hidden}.play-stage{aspect-ratio:var(--play-aspect,16 / 9);background:#08070b;width:100%;position:relative;overflow:hidden}.play-stage-frame{position:absolute;inset:0}.play-poster[hidden],.play-loading[hidden],.play-stage-toolbar[hidden]{display:none}.play-launch[hidden],.play-desktop-required[hidden]{display:none!important}.play-stage-iframe{background:#08070b;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.play-poster{padding:var(--space-lg);text-align:center;background-color:#100d14;background-position:50%;background-size:cover;place-items:center;display:grid;position:absolute;inset:0}.play-poster:before{content:"";background:linear-gradient(#08070b80 0%,#08070bd1 100%);position:absolute;inset:0}.play-poster-inner{justify-items:center;gap:var(--space-md);max-width:32rem;display:grid;position:relative}.play-launch{gap:.5rem;min-height:3.4rem;padding-inline:1.6rem;font-size:1.05rem}.play-launch-icon{flex:none;width:1.25rem;height:1.25rem}.play-desktop-required{border:var(--border-strong) solid #f7f0e4;border-radius:var(--radius-md);color:#f7f0e4;background:#08070be0;justify-items:center;gap:.45rem;width:min(100%,30rem);padding:clamp(1rem,3vw,1.4rem);display:none;box-shadow:4px 4px #000000a6}.play-desktop-required-icon{color:#f05a70;width:2rem;height:2rem}.play-desktop-required strong{font-family:var(--font-display);font-size:clamp(1rem,4vw,1.25rem);line-height:1.15}.play-desktop-required p{color:#f7f0e4d1;margin:0;font-size:.92rem;line-height:1.45}.play-loading{z-index:2;align-content:center;place-items:center;gap:var(--space-sm);color:#f7f0e4;background:#08070bdb;display:grid;position:absolute;inset:0}.play-loading p{max-width:none;color:inherit;letter-spacing:.04em;margin:0;font-weight:700}.play-spinner{border:3px solid #f7f0e440;border-top-color:var(--accent);border-radius:50%;width:2.6rem;height:2.6rem;animation:.8s linear infinite play-spin}@keyframes play-spin{to{transform:rotate(360deg)}}.play-stage-toolbar{z-index:3;flex-wrap:wrap;gap:.4rem;display:flex;position:absolute;bottom:.6rem;right:.6rem}.play-tool{border:1px solid var(--ink);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--surface) 92%, transparent);color:var(--text);cursor:pointer;box-shadow:2px 2px 0 var(--shadow-ink);transition:transform var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard);align-items:center;gap:.3rem;padding:.4rem .7rem;font-size:.78rem;font-weight:700;line-height:1;display:inline-flex}.play-tool:hover{background:var(--surface);box-shadow:3px 3px 0 var(--shadow-ink);transform:translate(-1px,-1px)}.play-tool:active{box-shadow:1px 1px 0 var(--shadow-ink);transform:translate(1px,1px)}.play-tool-fullscreen{color:#f7f0e4;opacity:.58;transition:transform var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard), opacity var(--ease-standard);background:#08070bb8;border-color:#f7f0e4ad;padding:.6rem;box-shadow:2px 2px #00000094}.play-tool-fullscreen:hover,.play-tool-fullscreen:focus-visible{opacity:1;background:#08070bf0;border-color:#f7f0e4}.play-tool-icon{flex:none;width:1.6rem;height:1.6rem}.play-stage:fullscreen{aspect-ratio:auto;width:100%;height:100%;box-shadow:none;border:0;border-radius:0}.play-stage:fullscreen .play-stage-toolbar{display:none}.play-controls-strip{align-items:center;gap:var(--space-sm) var(--space-md);padding:.75rem var(--play-card-pad);border-top:var(--border-strong) solid var(--ink);background:var(--panel);flex-wrap:wrap;display:flex}.play-controls-label{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);flex:none;align-items:center;gap:.45rem;font-size:.74rem;font-weight:800;display:inline-flex}.play-controls-icon{color:var(--accent);width:1.1rem;height:1.1rem}.play-controls-keys{flex-wrap:wrap;align-items:center;gap:.45rem .7rem;min-width:0;margin:0;padding:0;list-style:none;display:flex}.play-control{align-items:center;gap:.45rem;display:inline-flex}.play-keys{border:1px solid var(--ink);border-radius:var(--radius-xs);background:var(--surface);box-shadow:2px 2px 0 var(--shadow-ink);white-space:nowrap;padding:.28rem .5rem;font-size:.72rem;font-weight:700}.play-control-action{color:var(--text-soft);white-space:nowrap;font-size:.84rem;font-weight:600}.play-card{gap:var(--space-md);padding:var(--play-card-pad);border:var(--border-strong) solid var(--ink);border-radius:var(--radius-lg);background:var(--panel);box-shadow:4px 4px 0 var(--shadow-ink);display:grid}.play-card-title{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}.play-progress{gap:var(--space-md)}.play-progress-top{justify-content:space-between;align-items:flex-start;gap:var(--space-md) var(--space-lg);flex-wrap:wrap;display:flex}.play-progress-heading{flex:16rem;align-content:start;gap:.25rem;display:grid}.play-progress-title{align-items:center;gap:.5rem;display:inline-flex}.play-title-icon{color:var(--accent);width:1.15rem;height:1.15rem}.play-progress-sub{color:var(--text-soft);font-size:.9rem;line-height:1.5}.play-progress-playtime{color:var(--text-dim);align-items:center;gap:.4rem;margin-top:.1rem;font-size:.84rem;font-weight:600;display:inline-flex}.play-progress-playtime strong{color:var(--accent);font-weight:800}.play-playtime-icon{color:var(--accent)}.play-stats{gap:var(--space-sm);flex:0 auto;grid-template-columns:repeat(2,minmax(9rem,12rem));display:grid}.play-stat{justify-content:space-between;align-items:center;gap:var(--space-sm);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-height:3.5rem;padding:.55rem .85rem;display:flex}.play-stat-label{color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;font-weight:800}.play-stat-value{color:var(--text);font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:800}@property --p{syntax:"<number>";inherits:false;initial-value:0}.play-stat-ring{border:var(--border-strong) solid var(--ink);background:conic-gradient(var(--accent) calc(var(--p,0) * 1%), var(--surface-2) 0);border-radius:50%;flex:none;place-items:center;width:2.6rem;height:2.6rem;transition:--p .7s cubic-bezier(.4,0,.2,1);display:grid;position:relative}.play-stat-ring.is-reached{animation:.5s play-ring-pop}@keyframes play-ring-pop{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}.play-stat-ring:before{content:"";background:var(--surface);border-radius:50%;position:absolute;inset:.3rem}.play-stat-ring-num{z-index:1;color:var(--text);font-size:.66rem;font-weight:800;position:relative}.play-timeline-track{grid-auto-columns:1fr;grid-auto-flow:column;margin:0;padding:.5rem 0 0;list-style:none;display:grid}.play-milestone{text-align:center;align-content:start;justify-items:center;gap:.3rem;padding:0 .4rem;display:grid;position:relative}.play-milestone:not(:last-child):after{content:"";background:var(--line-strong);z-index:0;width:100%;height:2px;transition:background-color var(--ease-standard);position:absolute;top:.85rem;left:50%;transform:translateY(-50%)}.play-milestone.is-completed:after{background:var(--accent)}.play-milestone.is-current:not(:last-child):after{background-image:linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 25%, var(--surface)) 50%, var(--accent) 100%);background-size:220% 100%;animation:1.3s linear infinite play-flow}.play-milestone-marker{z-index:1;border:var(--border-strong) solid var(--line-strong);background:var(--surface);width:1.7rem;height:1.7rem;color:var(--accent-contrast);transition:background var(--ease-standard), border-color var(--ease-standard), box-shadow var(--ease-standard);border-radius:50%;place-items:center;display:grid;position:relative}.play-milestone.is-completed .play-milestone-marker{border-color:var(--ink);background:var(--accent)}.play-milestone-check{font-size:.85rem;font-weight:800;line-height:1}.play-milestone.is-current .play-milestone-marker{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);animation:1.8s ease-in-out infinite play-marker-pulse}.play-milestone.is-current .play-milestone-marker:after{content:"";background:var(--accent);border-radius:50%;width:.65rem;height:.65rem}.play-milestone-marker.is-reached{animation:.5s play-marker-pop}@keyframes play-flow{0%{background-position:220% 0}to{background-position:0 0}}@keyframes play-marker-pulse{0%,to{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 6%, transparent)}}@keyframes play-marker-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}to{transform:scale(1)}}.play-timeline-track[data-interactive] .play-milestone{cursor:pointer}.play-timeline-track[data-interactive] .play-milestone:focus-visible{outline:var(--border-strong) solid var(--accent);outline-offset:4px;border-radius:var(--radius-sm)}.play-milestone-label{color:var(--text);margin-top:.2rem;font-size:.86rem;font-weight:800}.play-milestone.is-remaining .play-milestone-label{color:var(--text-soft)}.play-milestone-desc{max-width:22ch;color:var(--text-dim);font-size:.78rem;line-height:1.4}.play-milestone-duration{color:var(--text-dim);align-items:center;gap:.25rem;font-size:.72rem;font-weight:700;display:inline-flex}.play-milestone-flag{border-radius:var(--radius-xs);background:var(--accent);color:var(--accent-contrast);letter-spacing:.08em;text-transform:uppercase;margin-top:.1rem;padding:.16rem .45rem;font-size:.62rem;font-weight:800}@media (width<=760px){.play-header-main{grid-template-columns:1fr}.play-thumb{max-width:18rem}.play-header-actions{justify-content:stretch;width:100%}.play-header-actions .btn{flex:auto}}@media (width<=680px){.play-timeline-track{gap:var(--space-sm);grid-auto-flow:row}.play-milestone{text-align:left;grid-template-columns:auto 1fr;place-items:start;gap:.1rem .8rem;padding:0}.play-milestone-marker{grid-row:1/span 4}.play-milestone:not(:last-child):after{width:2px;height:calc(100% - 1.7rem + var(--space-sm));top:1.7rem;left:.85rem;transform:translate(-50%)}.play-milestone-label{margin-top:0}.play-milestone-desc{max-width:none}.play-controls-strip{align-items:flex-start}.play-launch{width:100%}.play-stage-toolbar{bottom:.4rem;right:.4rem}}@media (width<=560px){.play-stats{grid-template-columns:1fr}}@media (hover:none),(pointer:coarse){[data-demo-launch].play-launch{display:none}.play-desktop-required{display:grid}}@media (prefers-reduced-motion:reduce){.play-spinner{animation-duration:1.6s}.play-tool:hover,.play-tool:active{transform:none}.play-stat-ring{transition:none}.play-stat-ring.is-reached,.play-milestone-marker.is-reached,.play-milestone.is-current .play-milestone-marker,.play-milestone.is-current:not(:last-child):after{animation:none}}
