/* The winner's Future Me photo layer (web/assets/arcade/photo.js), shared by both booth games. */
/* The winner's prize: Future Me photo layer over the game, driven by the gamepad.
   Sizes are in vh so it reads the same on a 1080p TV and a 4K one. */
#photo{position:fixed;inset:0;z-index:5;display:grid;place-items:center;color:#EEF4F7;
       background:radial-gradient(60% 60% at 50% 40%, rgba(12,26,38,.94), rgba(3,6,9,.97));padding:4vh 4vw;box-sizing:border-box}
#photo[hidden]{display:none}
#photo h1{font-size:5.2vh;margin:0 0 2.4vh;font-weight:800}
#photo h2{font-size:4.2vh;margin:0 0 2vh;font-weight:800}
.ph-center{text-align:center;max-width:1200px;width:100%}
.ph-lead{font-size:2.6vh;color:#B9C7D1;margin:0 0 2vh;line-height:1.8}
.ph-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:2.4vh 3vw;
         text-align:start;margin:0 auto 3vh;max-width:900px}
.ph-card ul{margin:0;padding-inline-start:1.4em;font-size:2.4vh;line-height:2;color:#DCE8EF}
.ph-hints{display:flex;gap:3vw;justify-content:center;flex-wrap:wrap;margin-top:1vh}
.ph-hint{display:inline-flex;align-items:center;gap:.7em;font-size:2.6vh;font-weight:700}
.ph-hint b{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:Manrope,sans-serif}
.ph-stage{position:relative;height:58vh;aspect-ratio:3/4;margin:0 auto 2.4vh;border-radius:26px;overflow:hidden;background:#000;
          border:2px solid rgba(255,255,255,.18)}
.ph-stage video,.ph-stage img{width:100%;height:100%;object-fit:cover;display:block}
.ph-stage video{transform:scaleX(-1)}
.ph-guide{position:absolute;inset:14% 22% 30%;border:3px dashed rgba(255,255,255,.5);border-radius:50%}
.ph-count{position:absolute;inset:0;display:grid;place-items:center;font-size:18vh;font-weight:800;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.ph-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.ph-flash.go{animation:phflash .5s ease}
@keyframes phflash{0%{opacity:.9}100%{opacity:0}}
.ph-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:2vh;margin:0 auto 3vh;max-width:1100px}
.ph-project{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);border-radius:22px;padding:3vh 2vw;
            display:flex;flex-direction:column;gap:1vh;text-align:start;transition:transform .12s ease}
.ph-project strong{font-size:3.2vh}
.ph-project span{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.14em;font-size:1.5vh;color:#7F909C}
.ph-project.on{border-color:#F26522;background:rgba(242,101,34,.2);transform:scale(1.04);box-shadow:0 0 30px rgba(242,101,34,.35)}
.ph-orb{width:22vh;height:22vh;margin:0 auto 4vh;border-radius:50%;position:relative;
        background:conic-gradient(from 0deg,#2D8BD8,#1FB5A8,#F26522,#2D8BD8);animation:phspin 2.4s linear infinite}
.ph-orb::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#070d13}
.ph-orb b{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-family:Manrope,sans-serif;font-size:4.4vh;
          animation:phspin 2.4s linear infinite reverse}
@keyframes phspin{to{transform:rotate(360deg)}}
.ph-result{display:grid;grid-template-columns:auto minmax(260px,420px);gap:4vw;align-items:center}
.ph-photo{height:80vh;aspect-ratio:2/3;object-fit:cover;border-radius:26px;box-shadow:0 30px 70px -30px #000}
.ph-side{text-align:start}
.ph-qr{background:#fff;color:#0B0E14;border-radius:22px;padding:2vh;text-align:center;margin:2vh 0}
.ph-qr svg{width:100%;height:auto;display:block}
.ph-wifi{border:3px dashed #1FB5A8}
.ph-side:has(.ph-wifi) .ph-qr svg{width:62%;margin:0 auto}
.ph-code{font-family:Manrope,Vazirmatn,sans-serif;font-size:3vh!important;letter-spacing:.12em;direction:ltr}
.ph-qr p{margin:1.4vh 0 0;font-weight:700;font-size:2.2vh;line-height:1.7}
.ph-timer{color:#7F909C;font-size:1.8vh;margin:1.4vh 0 0}
.ph-error{color:#FF8A76;font-size:2.6vh;line-height:1.8;margin:0 auto 3vh;max-width:900px}
@media (orientation: portrait){
  #photo{overflow:auto;place-items:start center}
  .ph-result{grid-template-columns:1fr;justify-items:center;gap:2vh}
  .ph-photo{height:auto;width:min(100%,55vh)}
  .ph-side{width:min(100%,55vh);text-align:center}
  .ph-projects{grid-template-columns:repeat(2,1fr)}
}