/* Photo Booth. The TV screens are Kita's two booth pictures (1672 × 941); everything on top is placed
   in % of that picture so it lines up at any screen size. */
body.pbtv { margin: 0; background: #0b0820; overflow: hidden; height: 100vh; display: grid; place-items: center; }
.pbstage {
  position: relative; aspect-ratio: 1672 / 941;
  width: min(100vw, calc(100vh * 1672 / 941)); container-type: inline-size;
}
.pbstage[hidden] { display: none; }
.pbbg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }

/* outside: the join card sits on the red curtain */
.curtain { position: absolute; left: 37.6%; top: 38.5%; width: 24.4%; height: 49%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; }
.joincard { background: rgba(20, 8, 36, .78); border: .25cqw solid #ffd84a; border-radius: 1.4cqw; padding: 1.1cqw 1.4cqw; text-align: center; color: #fff; box-shadow: 0 0 2cqw rgba(255, 216, 74, .35); }
.joincard .qr { background: #fff; padding: .5cqw; border-radius: .6cqw; display: inline-block; line-height: 0; }
.joincard .qr img, .joincard .qr canvas { width: 11cqw !important; height: 11cqw !important; }
.joincard .muted { font: 700 1.05cqw Nunito, sans-serif; opacity: .85; margin-top: .5cqw; }
.joincard .bigcode { font: 700 3.4cqw Fredoka, sans-serif; letter-spacing: .5cqw; color: #ffd84a; line-height: 1.1; }
.joincard p { margin: .2cqw 0 0; font: 800 1.05cqw Nunito, sans-serif; }
.enterbtn, .pbbtn {
  border: 0; border-radius: 99px; cursor: pointer; color: #fff;
  font: 700 1.9cqw Fredoka, sans-serif; padding: .8cqw 2.2cqw;
  background: linear-gradient(180deg, #ff5fc4, #d81b92); box-shadow: 0 .4cqw 0 #8e0d5f, 0 0 2cqw rgba(255, 79, 176, .6);
}
.enterbtn:active, .pbbtn:active { transform: translateY(.3cqw); box-shadow: 0 .1cqw 0 #8e0d5f; }
.pbbtn.ghost { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .2cqw rgba(255, 255, 255, .5); }

/* inside: the camera window (the pink-framed window in the design) */
.win { position: absolute; left: 21.23%; top: 25.19%; width: 56.4%; height: 54.73%; border-radius: 1cqw; overflow: hidden; background: #140a28; }
.win canvas { width: 100%; height: 100%; display: block; }
.nocam { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; text-align: center; background: rgba(20, 8, 40, .82); color: #fff; padding: 2cqw; }
.nocam b { font: 700 2.6cqw Fredoka, sans-serif; }
.nocam span { font: 800 1.35cqw Nunito, sans-serif; max-width: 38cqw; opacity: .92; }
.count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .6); }
.count span { font: 700 3.6cqw Fredoka, sans-serif; color: #fff; }
.count b { font: 700 12cqw/1 Fredoka, sans-serif; color: #fff; -webkit-text-stroke: .35cqw #ff3fa8; filter: drop-shadow(0 0 1.5cqw rgba(255, 63, 168, .8)); }
.count b.pop { animation: pop .9s ease-out; }
@keyframes pop { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: .9; } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.shots { position: absolute; right: 1cqw; bottom: 1cqw; display: flex; gap: .6cqw; }
.shots img { width: 9cqw; border-radius: .5cqw; border: .2cqw solid #fff; box-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .5); animation: pop .5s ease-out; }
.review { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3cqw; background: radial-gradient(circle at 50% 40%, #3a1460, #150828); }
.review[hidden] { display: none; }
.review .strip { height: 92%; border-radius: .6cqw; box-shadow: 0 .6cqw 2.5cqw rgba(0, 0, 0, .6); animation: drop .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes drop { 0% { transform: translateY(-110%) rotate(-6deg); } 100% { transform: none; } }
.review .share { color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8cqw; }
.review h2 { margin: 0; font: 700 2.8cqw Fredoka, sans-serif; }
.review .qr { background: #fff; padding: .5cqw; border-radius: .6cqw; line-height: 0; }
.review .qr img, .review .qr canvas { width: 12cqw !important; height: 12cqw !important; }
.review p { margin: 0; font: 800 1.25cqw Nunito, sans-serif; }
.review small { font-weight: 700; opacity: .75; }
.review .row { display: flex; gap: 1cqw; }
.review .pbbtn { font-size: 1.5cqw; padding: .7cqw 1.6cqw; }

/* the 6 filter tiles + TAKE PHOTO are drawn in the design; these are the real buttons on top */
.tiles { position: absolute; inset: 0; pointer-events: none; }
.tile { position: absolute; width: 7.24%; height: 11.05%; border: 0; padding: 0; background: transparent; border-radius: .7cqw; cursor: pointer; pointer-events: auto; }
.tile.on { box-shadow: 0 0 0 .3cqw #fff, 0 0 1.6cqw .5cqw #ff4fd8; }
.tile:not(.on):hover { box-shadow: 0 0 0 .2cqw rgba(255, 255, 255, .6); }
.take { position: absolute; left: 37.74%; top: 82.89%; width: 24.4%; height: 13.07%; border: 0; border-radius: 99px; background: transparent; cursor: pointer; }
.take:hover { box-shadow: 0 0 2cqw rgba(255, 79, 216, .7); }
.take:active, .take.press { transform: translateY(.3cqw); background: rgba(0, 0, 0, .12); }
.take:disabled { cursor: default; background: rgba(20, 8, 40, .45); }
.topright { position: absolute; right: 0.9%; top: 2.2%; width: 12.8%; display: flex; flex-direction: column; gap: .45cqw; background: rgba(20, 8, 36, .9); border-radius: 1.1cqw; padding: .6cqw; box-shadow: 0 0 0 .15cqw rgba(255, 79, 176, .6); }
.topright .row2 { display: flex; gap: .4cqw; }
.topright .pill { flex: 1; font-size: .78cqw; padding: .3cqw .4cqw; justify-content: center; }
.codechip { display: flex; align-items: center; gap: .55cqw; color: #fff; font: 800 .78cqw/1.15 Nunito, sans-serif; }
.codechip b { display: block; font: 700 1.9cqw Fredoka, sans-serif; color: #ffd84a; letter-spacing: .15cqw; }
.codechip .qrmini { background: #fff; padding: .25cqw; border-radius: .3cqw; line-height: 0; }
.codechip .qrmini img, .codechip .qrmini canvas { width: 4.6cqw !important; height: 4.6cqw !important; }
.nocam { cursor: pointer; }
.who { position: absolute; left: 21.23%; top: 20.6%; font: 800 1.15cqw Nunito, sans-serif; color: #fff; background: rgba(20, 8, 36, .8); border-radius: 99px; padding: .25cqw .9cqw; }

@media print {
  body.pbtv > *:not(#printImg) { display: none !important; }
  body.pbtv { background: #fff; display: block; height: auto; }
  #printImg { display: block !important; max-height: 100vh; margin: 0 auto; }
}

/* ---------------- phone ---------------- */
body.pbphone { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0, #4a1a78, #120826 70%); color: #fff; font-family: Nunito, sans-serif; }
.pbphone header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 800; }
.pbphone main { padding: 0 16px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 0 auto; }
.pbphone h1 { margin: 4px 0 0; font: 700 26px Fredoka, sans-serif; text-align: center; }
.pbphone .status { text-align: center; font-weight: 800; opacity: .9; min-height: 1.3em; }
.ptiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ptile { border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #2a1450; color: #fff; font: 800 14px Nunito, sans-serif; cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.ptile img { width: 100%; aspect-ratio: 121 / 104; object-fit: cover; display: block; }
.ptile span { display: block; padding: 5px 0 7px; }
.ptile.on { box-shadow: 0 0 0 3px #fff, 0 0 16px 4px #ff4fd8; }
.bigtake { border: 0; border-radius: 99px; padding: 20px; font: 700 26px Fredoka, sans-serif; color: #fff; background: linear-gradient(180deg, #ff5fc4, #d81b92); box-shadow: 0 6px 0 #8e0d5f, 0 0 26px rgba(255, 79, 176, .6); }
.bigtake:active { transform: translateY(4px); box-shadow: 0 2px 0 #8e0d5f; }
.bigtake:disabled { opacity: .5; }
.camtoggle { border: 0; border-radius: 99px; padding: 12px; font: 800 15px Nunito, sans-serif; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.camtoggle.on { background: #1e9e5a; }
.pcam { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 1.83; }
.pcam[hidden] { display: none; }
.pcam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.pcam .pcount { position: absolute; inset: 0; display: grid; place-items: center; font: 700 90px Fredoka, sans-serif; text-shadow: 0 0 20px #ff3fa8; }
.pcam .pflash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.pcam .pflash.go { animation: flash .5s ease-out; }
.mystrip { background: rgba(0, 0, 0, .25); border-radius: 16px; padding: 12px; text-align: center; }
.mystrip[hidden] { display: none; }
.mystrip img { max-width: 70%; max-height: 60vh; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.mystrip a { display: inline-block; margin-top: 10px; color: #fff; background: #1e64ff; border-radius: 99px; padding: 12px 22px; font: 800 16px Nunito, sans-serif; text-decoration: none; }
.mystrip p { margin: 8px 0 0; font-size: 13px; opacity: .8; }

/* ways home: a button outside, the logo + a Home pill inside */
/* the It’s Game Time logo is the home button (Kita, 2026-10-02) */
.homebtn { position: absolute; left: 1.2%; top: 1.6%; z-index: 5; display: block; width: 10.5%; filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.6)); transition: transform .15s; }
.homebtn img { width: 100%; display: block; }
.homebtn:hover { transform: scale(1.06); }
.logolink { position: absolute; left: 1%; top: 1.5%; width: 20%; height: 24%; border-radius: 2cqw; }
.topright a.pill { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.topright a.homepill { justify-content: center; font-size: .95cqw; padding: .4cqw; background: #ff4fb0; color: #fff; }