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