/* /play/ page: the game frame and the text around it (docs/SITE.md "Play"). Uses the keynote
   variables from base.css (--ink, --ivory, --fire, --wrap, --ease), with fallbacks. */
.pl{--pl-ink:var(--ink,#0d0809);--pl-fire:var(--fire,#ff4a1c);--pl-ease:var(--ease,cubic-bezier(.2,.7,.1,1));--pl-wrap:var(--wrap,min(1180px,calc(100vw - 48px)))}
.pl-top{width:var(--pl-wrap);margin:0 auto;padding:34px 0 24px;text-align:center}
.pl-h{font-size:clamp(40px,6vw,84px);line-height:.98;font-weight:850;letter-spacing:-.045em;margin-top:12px}
.pl-h em{display:inline-block;color:var(--ink2,#2a2220)}
.pl-lede{font-size:20px;color:var(--mute,#6b6058);margin-top:12px}

/* frame: 16:9 slot that holds the poster, then the iframe */
.pl-frame{position:relative;width:min(1100px,100%,calc((100svh - 190px) * 16 / 9));margin:28px auto 0;aspect-ratio:16/9;background:#140a0b;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(13,8,9,.2),0 40px 60px -30px rgba(60,30,10,.45)}
.pl-app{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#140a0b}
.pl-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vw,28px);text-decoration:none;color:var(--pl-ink);
  background:radial-gradient(circle at 50% 100%,rgba(255,74,28,.28),rgba(255,74,28,0) 60%),repeating-conic-gradient(from 0deg at 50% 100%,#251110 0 6.43deg,#140a0b 6.43deg 12.86deg);-webkit-tap-highlight-color:transparent}
.pl-fuse{height:44%;width:auto;transform-origin:50% 100%;transition:transform .5s var(--pl-ease)}
.pl-poster:hover .pl-fuse{transform:rotate(-5deg) scale(1.04)}
.pl-go{display:inline-flex;align-items:center;gap:14px;background:var(--pl-fire);border-radius:99px;padding:12px 12px 12px 30px;font-weight:800;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(120,20,0,.18);transition:transform .25s var(--pl-ease)}
.pl-go svg{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--pl-ink);fill:var(--ivory,#f7f2e9)}
.pl-poster:hover .pl-go{transform:scale(1.04)}
.pl-poster:active .pl-go{transform:scale(.97)}
.pl-on .pl-poster{display:none}

/* full screen (desktop, Android) and full viewport (phones, iPhone without element full screen) */
.pl-frame:fullscreen{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;margin:0}
.pl-max .pl-frame{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;height:100dvh;margin:0;border-radius:0;aspect-ratio:auto}
html.pl-lock,html.pl-lock body{overflow:hidden;overscroll-behavior:none}
/* The way back sits in the free strip of the game's top bar, between the death count and the room dots. */
.pl-exit{position:absolute;z-index:2;top:max(6px,env(safe-area-inset-top));left:27%;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:99px;padding:6px 12px 6px 8px;
  background:rgba(13,8,9,.62);color:#efe4cf;font:600 13px/1 system-ui,sans-serif;cursor:pointer;opacity:.8}
.pl-exit:hover,.pl-exit:focus-visible{opacity:1}
.pl-exit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pl-exit[hidden]{display:none}

/* Phones (pl-touch, set by play.js): the game never runs in the small portrait box. Back on the
   page, the poster covers the paused frame again and a tap reopens the game over the screen. */
.pl-touch.pl-on:not(.pl-max) .pl-poster{display:flex;z-index:1}

/* "Turn your phone" cover: phones, game open, portrait. The game keeps running underneath. */
.pl-turn{display:none;position:absolute;inset:0;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;color:#efe4cf;
  background:radial-gradient(circle at 50% 42%,rgba(255,74,28,.24),rgba(255,74,28,0) 55%),repeating-conic-gradient(from 0deg at 50% 42%,#251110 0 7.5deg,#140a0b 7.5deg 15deg);
  -webkit-user-select:none;user-select:none;touch-action:none}
@media (orientation:portrait){.pl-touch.pl-max .pl-turn{display:flex}}
.pl-max .pl-exit{z-index:4}
.pl-turn-art{width:min(46vw,190px);height:auto;margin-bottom:10px;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.pl-turn-dev{transform-origin:80px 80px;animation:pl-turn 2.8s var(--pl-ease) infinite}
.pl-turn-arc{animation:pl-arc 2.8s ease-in-out infinite}
.pl-turn-fl{transform-origin:59.5px 77px;animation:pl-fl .35s ease-in-out infinite alternate}
.pl-turn-h{margin:0;font-size:clamp(34px,10vw,56px);line-height:1.02;font-weight:850;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance}
.pl-turn-p{margin:6px 0 0;font-size:17px;color:rgba(239,228,207,.72);max-width:24ch}
.pl-turn-go{margin-top:22px;border:0;cursor:pointer;border-radius:99px;padding:13px 26px;background:var(--pl-fire);color:var(--pl-ink);font:inherit;font-size:18px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -10px rgba(255,74,28,.7)}
.pl-turn-go:active{transform:scale(.97)}
.pl-turn-go[hidden]{display:none}
@keyframes pl-turn{0%,16%{transform:rotate(0)}40%,74%{transform:rotate(-90deg)}94%,100%{transform:rotate(0)}}
@keyframes pl-arc{0%,10%{opacity:.15}30%,60%{opacity:1}85%,100%{opacity:.15}}
@keyframes pl-fl{from{transform:scale(1,.85)}to{transform:scale(.9,1.12)}}

.pl-bar{display:flex;align-items:center;justify-content:center;gap:14px 28px;flex-wrap:wrap;margin-top:20px}
.pl-full{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--pl-ink);color:var(--ivory,#f7f2e9);border-radius:99px;padding:14px 26px;font:inherit;font-size:18px;font-weight:750;transition:transform .25s var(--pl-ease)}
.pl-full svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pl-full:hover{transform:scale(1.03)}
.pl-daily{display:inline-block;padding:10px 2px;margin:-10px 0;font-weight:700;color:var(--fire-t,#c2330c);text-underline-offset:4px}
.pl-note{flex-basis:100%;font-size:14px;color:var(--mute,#6b6058)}

/* text */
.pl-text{width:var(--pl-wrap);margin:40px auto 0;padding:0 0 100px;display:grid;grid-template-columns:1fr 1fr;gap:20px 72px;border-top:1px solid var(--line,rgba(13,8,9,.12))}
.pl-text h2{font-size:clamp(26px,2.6vw,34px);line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:40px 0 12px}
.pl-text h3{font-size:18px;font-weight:750;margin:22px 0 4px}
.pl-text p,.pl-text li{color:var(--ink2,#2a2220);max-width:60ch}
.pl-text a{color:var(--fire-t,#c2330c);text-underline-offset:3px}
.pl-keys{margin:0;padding-left:1.1em;display:grid;gap:10px}
.pl-noscript{text-align:center;padding:20px}

@media (max-width:760px){
  .pl-top{padding-top:22px}
  .pl-frame{border-radius:16px;margin-top:20px}
  .pl-go{padding:10px 10px 10px 22px}
  .pl-go svg{width:38px;height:38px;padding:9px}
  .pl-full{width:100%;justify-content:center}
  /* Portrait phones: the label would cover the game's title, keep the cross only. */
  .pl-exit{padding:8px}
  .pl-exit span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pl-text{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){.pl-fuse,.pl-go,.pl-full{transition:none}.pl-turn-dev,.pl-turn-arc,.pl-turn-fl{animation:none}.pl-turn-dev{transform:rotate(-90deg)}}