/* Family Face Off (shared bits come from /water/water.css) */
.ftv { height: 100vh; overflow: hidden; background: #050a2e; display: grid; place-items: center; }
.fstage {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: url(/art/faceoff/studio.jpg) center / 100% 100% no-repeat, #0a1450;
}
/* the board: Kita's board art, with the answers dropped into its 8 slots (picture is 671 × 379) */
.fboard { position: absolute; left: 24%; width: 52%; top: 3.5%; aspect-ratio: 671 / 379; z-index: 3; filter: drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)); }
.fboard > img { width: 100%; height: 100%; display: block; }
.slot {
  position: absolute; width: calc(196 / 671 * 100%); height: calc(40 / 379 * 100%); border-radius: .4cqw; overflow: hidden;
  display: flex; align-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; color: #fff; perspective: 30cqw;
}
.slot.empty { background: linear-gradient(#1b3f9e, #10297a); box-shadow: inset 0 0 0 .12cqw #3c6ad8; }
.slot.click { cursor: pointer; outline: .2cqw dashed #ffc53d; }
.slot .face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: .4cqw; padding: 0 0 0 .8cqw;
  background: linear-gradient(#3a7bff, #1a49c9); box-shadow: inset 0 0 0 .14cqw #9cc4ff; text-shadow: 0 .12cqw .3cqw rgba(0,0,0,.5);
  font-size: 1.3cqw; text-transform: uppercase; letter-spacing: .01em; animation: flip .55s ease-out;
}
.slot .face .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot .face .p { flex: none; height: 100%; min-width: 2.6cqw; display: grid; place-items: center; background: #0b2370; font-size: 1.5cqw; padding: 0 .4cqw; }
.slot.late .face { background: linear-gradient(#5d6f9c, #3d4d7a); box-shadow: inset 0 0 0 .14cqw #9aa8c8; }
@keyframes flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.fscore {
  position: absolute; top: calc(178 / 379 * 100%); height: calc(94 / 379 * 100%); width: calc(105 / 671 * 100%);
  display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 3cqw; color: #fff;
  text-shadow: 0 0 1cqw rgba(120,180,255,.9);
}
.fscore.s1 { left: 0; } .fscore.s2 { left: calc(570 / 671 * 100%); }
.fscore.bump { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.fbank, .fround {
  position: absolute; z-index: 4; padding: .2cqw 1.1cqw; border-radius: 99px; font-family: 'Fredoka', sans-serif; font-weight: 700;
  background: rgba(5,12,50,.85); border: .18cqw solid #ffc53d; color: #ffe08a; white-space: nowrap;
}
.fbank { left: 50%; transform: translateX(-50%); top: 50.5%; font-size: 1.3cqw; }
.fround { left: 1.4%; top: 12.5%; font-size: 1.1cqw; }

.fq {
  position: absolute; left: 26%; right: 26%; top: 57%; z-index: 5; padding: .9cqw 1.6cqw; border-radius: 1.4cqw;
  background: #fff; color: #10205e; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2cqw; line-height: 1.15; text-align: center;
  box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.45); border: .3cqw solid #ffc53d;
}
.fq::before { content: ''; position: absolute; left: 50%; bottom: -1.9cqw; transform: translateX(-50%); border: .9cqw solid transparent; border-top: 1.1cqw solid #ffc53d; }
.fsaid {
  position: absolute; left: 55.5%; top: 74%; z-index: 6; padding: .5cqw 1.4cqw; border-radius: 99px; white-space: nowrap;
  background: rgba(5,12,50,.92); border: .2cqw solid #7fb2ff; font-weight: 900; font-size: 1.6cqw;
}
.fsaid.pop { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.fx { position: absolute; inset: 0; z-index: 9; display: flex; gap: 2cqw; align-items: center; justify-content: center; pointer-events: none; }
.fx span {
  width: 13cqw; height: 13cqw; display: grid; place-items: center; font: 900 11cqw/1 'Nunito', sans-serif; color: #ff2a2a;
  background: rgba(30,0,0,.6); border: .6cqw solid #ff2a2a; border-radius: 1.4cqw; text-shadow: 0 0 2cqw #ff0000;
  box-shadow: 0 0 3cqw rgba(255,0,0,.7); animation: pop .35s cubic-bezier(.2, 1.6, .4, 1);
}
.fbanner { position: absolute; left: 50%; top: 40%; width: 30%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
  filter: drop-shadow(0 .8cqw 1.6cqw rgba(0,0,0,.6)); }
.fbanner.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }

.fhost { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.5%; height: 33%; z-index: 6; filter: drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.55)); transition: transform .3s; }
.fhost.bounce { animation: hostbounce .6s ease-out; }
@keyframes hostbounce { 30% { transform: translateX(-50%) translateY(-3%) rotate(-2deg); } }

.fpod { position: absolute; bottom: 4%; width: 24%; z-index: 5; display: flex; flex-direction: column; align-items: center; }
.fpod.p1 { left: 25%; } .fpod.p2 { right: 25%; }
.fpod img { width: 100%; }
.fpod.on img { filter: drop-shadow(0 0 1.6cqw rgba(255,214,90,.95)); }
.fteam { display: flex; flex-wrap: wrap; justify-content: center; gap: .3cqw; margin-bottom: -.4cqw; max-width: 100%; }
.fteam span { padding: .15cqw .6cqw; border-radius: 99px; background: rgba(5,12,50,.85); border: .15cqw solid rgba(255,255,255,.3); font-weight: 800; font-size: .95cqw; white-space: nowrap; }
.fteam span.turn { background: #ffc53d; color: #2b1600; border-color: #fff; transform: scale(1.12); }
.fteam span.off { opacity: .45; }
.faud { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 7; pointer-events: none; }

.fctl { position: absolute; right: 1%; bottom: 8.5%; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: .4cqw; max-width: 22%; }
.fctl .btn.small { font-size: .95cqw; padding: .5cqw .9cqw; }
.fhint { background: rgba(5,12,50,.9); border: .15cqw solid #ffc53d; border-radius: .8cqw; padding: .4cqw .7cqw; font-size: .9cqw; font-weight: 800; text-align: right; }

.flobby { left: 22% !important; right: 22% !important; top: 8% !important; bottom: 8% !important; align-items: center; text-align: center; z-index: 11; }
.flobby .btn { align-self: center; }
.flogo { width: 12cqw; }
.fteams { display: flex; gap: 1cqw; width: 100%; }
.ft { flex: 1; border-radius: 1cqw; padding: .6cqw; display: grid; gap: .3cqw; align-content: start; min-height: 6cqw; }
.ft b { font-family: 'Fredoka', sans-serif; font-size: 1.4cqw; }
.ft div { display: flex; flex-wrap: wrap; gap: .3cqw; justify-content: center; }
.ft div span { padding: .2cqw .6cqw; border-radius: 99px; background: rgba(255,255,255,.15); font-weight: 800; font-size: 1cqw; }
.ft.t1 { background: rgba(40,90,230,.45); border: .2cqw solid #5d8bff; }
.ft.t2 { background: rgba(210,40,70,.45); border: .2cqw solid #ff5d7b; }
.fwin { left: 25% !important; right: 25% !important; top: 10% !important; bottom: 12% !important; text-align: center; align-items: center; justify-content: center; z-index: 11; }
.fwin h1 { font-size: 4.6cqw; }
.fwin h2 { margin: 0; font-size: 2cqw; }
.fwin .row { display: flex; gap: .8cqw; }
.fwin .btn { align-self: center; }
.fwho { display: flex; flex-wrap: wrap; gap: .4cqw; justify-content: center; font-size: 1.3cqw; font-weight: 800; }
.fwho span { padding: .2cqw .7cqw; border-radius: 99px; background: rgba(255,197,61,.25); }

/* ===== PHONE ===== */
.fphone { min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 50% 0%, #2f58d8, #0a1450 55%, #050a2e); }
.fphone main { max-width: 480px; margin: 0 auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.fphone header { display: flex; align-items: center; gap: 8px; }
.fphone header .me { flex: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpill { padding: 5px 12px; border-radius: 99px; font-weight: 900; font-size: .9rem; }
.tpill.t1, .tbtn.t1.on { background: #2f6fe0; } .tpill.t2, .tbtn.t2.on { background: #d6334f; }
.fphone .card { background: rgba(5,12,50,.82); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 16px; display: grid; gap: 12px; text-align: center; }
.fphone .card h1 { margin: 0; font-size: 1.5rem; }
.fphone .qtext { background: #fff; color: #10205e; border-radius: 14px; padding: 12px 14px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem; border: 3px solid #ffc53d; }
.tpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tbtn { appearance: none; border: 3px solid rgba(255,255,255,.3); border-radius: 16px; padding: 16px 8px; font: 900 1.2rem 'Nunito', sans-serif; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.tbtn.on { border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.4); }
.mates { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-weight: 800; font-size: .9rem; }
.mates span { padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.12); }
.buzz {
  appearance: none; border: 0; width: min(70vw, 260px); aspect-ratio: 1; border-radius: 50%; justify-self: center; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #ff7a7a, #e0182b 60%, #8f0614); color: #fff; font: 900 2.6rem 'Nunito', sans-serif;
  box-shadow: 0 10px 0 #6d0410, 0 16px 30px rgba(0,0,0,.5); text-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.buzz:active { transform: translateY(6px); box-shadow: 0 4px 0 #6d0410, 0 8px 18px rgba(0,0,0,.5); }
.ansform { display: grid; gap: 10px; }
.ansform input { font: 800 1.25rem 'Nunito', sans-serif; padding: 14px; border-radius: 14px; border: 3px solid #ffc53d; text-align: center; background: #fff; color: #10205e; }
.ansform .btn { font-size: 1.15rem; }
.toast { border-radius: 14px; padding: 10px; font-weight: 900; font-size: 1.05rem; }
.toast.good { background: rgba(47,209,139,.9); } .toast.bad { background: rgba(230,30,50,.9); } .toast.info { background: rgba(255,197,61,.9); color: #2b1600; }
.miniscore { display: flex; justify-content: space-between; gap: 8px; font-weight: 900; }
.miniscore span { flex: 1; border-radius: 12px; padding: 6px; }
.slot .face.long { font-size: 1.05cqw; }
.slot .face.longer { font-size: .9cqw; }

/* heads behind the desks — each player's face from their phone camera (or their emoji) */
.fheads { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fhead { position: absolute; width: 5.2%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; transition: transform .25s; }
.fhead .face {
  width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 3cqw;
  background: radial-gradient(circle at 50% 35%, #5d7dd8, #1a2a6e); border: .28cqw solid #fff; box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.5);
}
.fhead .face img { width: 100%; height: 100%; object-fit: cover; }
.fhead.t1 .face { border-color: #6c9bff; } .fhead.t2 .face { border-color: #ff6b85; }
.fhead .nm { margin-top: .25cqw; padding: .05cqw .5cqw; border-radius: 99px; background: rgba(5,12,50,.88); font-weight: 900; font-size: .8cqw; white-space: nowrap; max-width: 9cqw; overflow: hidden; text-overflow: ellipsis; }
.fhead.turn { transform: translate(-50%, -104%) scale(1.18); }
.fhead.turn .face { border-color: #ffc53d; box-shadow: 0 0 1.6cqw rgba(255,197,61,.95); }
.fhead.off { opacity: .45; }
.fdesk { position: absolute; top: 61.5%; z-index: 4; transform: translateX(-50%); padding: .15cqw .9cqw; border-radius: 99px; font: 900 1cqw 'Nunito', sans-serif; letter-spacing: .05em; }
.fdesk.d1 { left: 12.3%; background: #2f6fe0; } .fdesk.d2 { left: 87.5%; background: #d6334f; }
.fdesk.on { box-shadow: 0 0 1.6cqw 0.3cqw rgba(255,214,90,.9); }

/* your face on the TV (phone) */
.facebtn { appearance: none; border: 2px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; border-radius: 99px; padding: 4px 10px; font-size: 1.1rem; cursor: pointer; }
.selfie { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; transform: scaleX(-1); border: 3px solid #ffc53d; background: #000; }
.camoffer { display: grid; gap: 6px; }
.fbotrow { display: flex; gap: .8cqw; justify-content: center; flex-wrap: wrap; }
/* the long temporary web address must not blow up the lobby on smaller screens */
.flobby .wjoin { justify-content: center; }
.flobby #joinUrl { font-size: 1.05cqw; overflow-wrap: anywhere; max-width: 24cqw; }

/* the host on video (Grok clips): same spot as the still picture; see-through where the browser can */
.fhostvid { position: absolute; left: 50%; transform: translateX(-50%); bottom: .3%; height: 37%; aspect-ratio: 2 / 3; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.55)); }
.fhostvid.boxed { border-radius: 1.2cqw; border: .25cqw solid #ffc53d; filter: none; height: 33%; bottom: 1.5%; }

/* in the lobby the host stands big on the left and welcomes everyone; the join panel moves right */
.fstage.inlobby .fhost, .fstage.inlobby .fhostvid { left: 13%; height: 72%; bottom: 1%; }
.fstage.inlobby .fhost { height: 66%; bottom: 3%; }
.fstage.inlobby .fhostvid.boxed { height: 60%; bottom: 4%; }
.fstage.inlobby .flobby { left: 27% !important; right: 6% !important; }

/* answer by voice */
.mic { border-radius: 22px; padding: 18px 14px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 900 1.15rem 'Nunito', sans-serif; color: #fff; background: linear-gradient(135deg, #ff4f9a, #c23ad8); cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,60,160,.45); text-align: center; }
.mic .ico { font-size: 2rem; }
.mic.on { animation: micpulse 1.4s infinite; }
.mic:disabled { opacity: .75; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 12px rgba(255,79,154,.18), 0 8px 24px rgba(255,60,160,.45); } }
/* a big group (Kita 2026-10-06): the rest of the team, under the desk */
.fmore { position: absolute; top: 75%; transform: translateX(-50%); z-index: 6; padding: .25cqw .9cqw; border-radius: 99px; background: rgba(10,8,30,.85);
  font: 800 1cqw Nunito, sans-serif; color: #fff; white-space: nowrap; border: .15cqw solid rgba(255,255,255,.4); }
#lob1.many, #lob2.many { display: flex; flex-wrap: wrap; gap: .2cqw; max-height: 12cqw; overflow: hidden; }
#lob1.many span, #lob2.many span { font-size: .7cqw; padding: .1cqw .45cqw; }

/* the face-off podium (Kita 2026-10-10: "nobody comes to the centre to face each other like in Family Feud"):
   ChatGPT console (public/art/faceoff/console.png) at the front of the stage, Shawn behind it, the two
   face-off players at its ends; the buzzer side of whoever buzzed first lights up */
.fconsole { position: absolute; left: 0; right: 0; bottom: 0.5%; z-index: 7; pointer-events: none; animation: consolein .5s cubic-bezier(.2,1.4,.4,1); }
.fconsole .pod { position: absolute; bottom: 0; width: 8%; transform: translateX(-50%); filter: drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.6)); transition: filter .25s; }
.fconsole .p1 { left: 37.5%; } .fconsole .p2 { left: 62.5%; }
.fconsole.buzz1 .p1 { filter: drop-shadow(0 0 1.2cqw rgba(108,155,255,1)) drop-shadow(0 0 2.4cqw rgba(108,155,255,.9)); }
.fconsole.buzz2 .p2 { filter: drop-shadow(0 0 1.2cqw rgba(255,107,133,1)) drop-shadow(0 0 2.4cqw rgba(255,107,133,.9)); }
@keyframes consolein { from { transform: translateY(30%); opacity: 0; } }
.fhead { transition: transform .25s, left .7s cubic-bezier(.3,.9,.3,1), top .7s cubic-bezier(.3,.9,.3,1); }
.fhead.atpodium { z-index: 8; }
.fhead.atpodium .face { border-color: #ffc53d; box-shadow: 0 0 1.6cqw rgba(255,197,61,.95); }
/* while the podium is out, Shawn's bubble sits to the right of the stage so it never covers a player at the podium */
.fstage:has(.fconsole:not([hidden])) .fsaid { left: 78%; top: 67%; transform: translateX(-50%); font-size: 1.4cqw; }
.fstage:has(.fconsole:not([hidden])) .fheads { z-index: 8; }   /* names at the podium stay in front of it */