.play-section{padding:60px var(--gutter);scroll-margin-top:78px;border-block:1px solid color-mix(in srgb,var(--ink) 17%,transparent)}
.play-heading{display:flex;gap:30px;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.play-heading>div{max-width:780px}.play-heading h2{font-size:clamp(28px,3.5vw,48px);line-height:1.15;letter-spacing:-.035em;margin:12px 0 15px}.play-heading p{line-height:1.6}.play-heading>.text-link{white-space:nowrap;margin-top:10px}
.play-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;counter-reset:guide;padding:0;margin:0 0 30px}.play-guide li{counter-increment:guide;font-size:13px;line-height:1.6;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}.play-guide li::before{content:'0' counter(guide);display:block;font:11px/1.2 monospace;opacity:.55;margin-bottom:12px}
.play-stage{position:relative;width:100%;aspect-ratio:16/10;min-height:350px;background:#0c0e0e;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);overflow:hidden;color:#eee}
.play-stage iframe{display:block;width:100%;height:100%;position:absolute;inset:0;border:0;background:#080909}
.play-cover{width:100%;height:100%;min-height:350px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:28px;text-align:center;background:radial-gradient(ellipse at 50% 25%,#252827,transparent 70%)}
.play-cover[hidden]{display:none}.play-symbol{font:50px/1 Georgia,serif;color:#a5aaa6}.play-cover h3{font-size:clamp(25px,3vw,42px);font-weight:400;line-height:1.2;margin:0;letter-spacing:-.025em}
.play-start{appearance:none;color:#141615;background:#e9eae5;border:0;border-radius:2px;font:600 13px/1.2 Inter,Arial,sans-serif;padding:17px 22px;cursor:pointer;display:flex;align-items:center;gap:32px}.play-start:hover{background:#fff}.play-start:focus-visible{outline:2px solid #fff;outline-offset:5px}
.play-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:14px;font-size:11px}.play-status{margin:0;line-height:1.6;opacity:.7}.play-toolbar>div{display:flex;gap:18px;flex-shrink:0}.play-toolbar button{background:none;color:inherit;border:0;padding:6px 0;font:inherit;cursor:pointer;border-bottom:1px solid currentColor}.play-toolbar button[hidden]{display:none}
.play-stage:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;background:#080909;border:0}
@media(max-width:700px){.play-section{padding-block:35px}.play-heading{display:block}.play-heading>.text-link{display:inline-flex;margin-top:6px}.play-guide{grid-template-columns:1fr;gap:12px}.play-guide li{padding-left:31px;position:relative;padding-top:12px}.play-guide li::before{position:absolute;left:0;top:15px}.play-stage{aspect-ratio:3/4;min-height:440px}.play-cover{min-height:440px}.play-cover h3{font-size:27px}.play-toolbar{align-items:flex-start;flex-direction:column;gap:9px}}
.play-guide li{font-size:17px;line-height:1.55}.play-toolbar{font-size:15px;line-height:1.5}.play-start{font-size:17px;padding:17px 24px}.play-heading p{font-size:20px}.play-heading .eyebrow{font-size:13px}
body[data-project=loofasoup] .play-cover{background:radial-gradient(ellipse at 50% 12%,#61784b,#293f31 80%)}body[data-project=loofasoup] .play-start{background:#e8e6a5;color:#234b36}body[data-project=ambulance] .play-cover{background:radial-gradient(ellipse at 50% 12%,#2c4b6c,#142636 80%)}
@media(max-width:700px){.play-guide li{font-size:16px}.play-toolbar{font-size:14px}.play-stage{aspect-ratio:4/3;min-height:320px}.play-cover{min-height:320px}.play-heading p{font-size:18px}}

/* A compact invitation keeps the case readable; Unity exists only after Play. */
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-stage{
 width:100%;min-height:0;aspect-ratio:auto;margin-inline:auto;
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-cover{
 min-height:148px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 gap:22px;padding:28px 36px;text-align:left;
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-cover[hidden]{display:none}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-cover h3{margin:0}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-start{white-space:nowrap;gap:20px}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section.is-game-open .play-stage{
 width:min(100%,1120px,calc((100svh - 190px) * 16 / 9));aspect-ratio:16/9;
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section.is-game-open .play-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}
@media(max-width:700px){
 body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-cover{
  min-height:200px;grid-template-columns:auto minmax(0,1fr);gap:20px 14px;padding:24px;
 }
 body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-start{grid-column:1/-1;justify-self:center}
 body:is([data-project=ambulance],[data-project=loofasoup]) .play-section.is-game-open .play-stage{width:100%;aspect-ratio:4/3}
}

/* Compact original-art invitations; Unity starts only after Play game. */
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-cover-poster{
 display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
 min-height:0;gap:40px;padding:24px 48px;background:#214e37;
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-cover-poster .play-cover-art{
 display:block;justify-self:center;width:min(100%,410px);height:auto;object-fit:contain;
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-cover-poster .play-launch-actions{
 display:grid;gap:22px;justify-items:start;align-content:center;min-width:0;padding-block:8px;color:#f6f2cf;
}
body[data-project=ambulance] .play-section .play-cover-poster{background:#dce8e4}
body[data-project=ambulance] .play-cover-poster .play-launch-actions{color:#244f78}
body[data-project=ambulance] .play-cover-poster h3{
 font-size:var(--case-title)!important;font-weight:700;line-height:1.02!important;letter-spacing:-.025em;
}
body[data-project=ambulance] .play-cover-poster .play-start{background:#285a86;color:#fff}
body[data-project=ambulance] .play-cover-poster .play-start:hover{background:#214b71}
body[data-project=loofasoup] .play-cover-poster .play-title-art{
 position:relative;width:min(100%,440px);aspect-ratio:2585/967;overflow:hidden;
}
/* The source PNG is untouched; its transparent outer margin is outside this viewport. */
body[data-project=loofasoup] .play-title-art>img{
 position:absolute;display:block;width:124.6422%;max-width:none;height:auto;left:-24.6422%;top:-20.3723%;
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-start:focus-visible{
 outline:3px solid currentColor;outline-offset:4px;
}
@media(max-width:700px){
 body:is([data-project=ambulance],[data-project=loofasoup]) .play-section .play-cover-poster{
  grid-template-columns:1fr;gap:20px;padding:24px;
 }
 body:is([data-project=ambulance],[data-project=loofasoup]) .play-cover-poster .play-cover-art{width:min(100%,300px)}
 body:is([data-project=ambulance],[data-project=loofasoup]) .play-cover-poster .play-launch-actions{
  padding:0;gap:18px;justify-items:center;text-align:center;
 }
 body[data-project=ambulance] .play-cover-poster h3{font-size:var(--case-title)}
 body[data-project=loofasoup] .play-cover-poster .play-title-art{width:min(100%,320px)}
}
@layer case-typography{
 body[data-view=project][data-project=ambulance] .case-study .play-cover-poster h3{
  font-size:var(--case-title)!important;line-height:1.05!important;font-weight:600!important;
 }
}
body:is([data-project=ambulance],[data-project=loofasoup]) .play-section:not(.is-game-open) .play-toolbar{display:none}
/* Keep the game name together without enlarging the compact invitation. */
body[data-project=ambulance] .play-cover-poster h3{white-space:nowrap;text-wrap:nowrap}
@layer case-typography{
 @media(min-width:701px) and (max-width:1100px){body[data-view=project][data-project=ambulance] .case-study .play-cover-poster h3{font-size:var(--case-heading)!important}}
 @media(max-width:700px){body[data-view=project][data-project=ambulance] .case-study .play-cover-poster h3{font-size:var(--case-heading)!important}}
}