/* Stage 1S (owner t7188u restyle step 1, BUG-20261104-017): the sign-in landing in the mockup colours (mockups/lobby-friends-1103 owner-target-1106: navy, gold, green) and Rule 23. Signed-out page only. */ html:not(.signed-in):not(.guest-play) body{background:radial-gradient(120% 60% at 50% 0%,#1d3350 0%,#0f1c2e 55%,#0a1422 100%) fixed #0a1422!important} html:not(.signed-in):not(.guest-play) #gate{background:transparent!important;color:#eaf2fb!important} html body #gate > picture{order:1}html body #gate > .gate-title{order:2}html body #gate > .gate-tag{order:3}html body #gate > .gate-idle{order:4} html body #gate > .gate-scene{order:5}html body #gate > #gocOpener,html body #gate > #gocSkitSpace{order:6}html body #gate > #gateVoiceCap{order:6} html body #gate > #gateAuth{order:7}html body #gate > #gateGuest{order:8}html body #gate > #gateRegBig{order:9}html body #gate > .gate-foot{order:10} html body #gate > .gate-pills{order:10}html body #gate > .founder-wrap{order:11}html body #gate > *{order:20} html body #gate .gate-logo{max-width:min(300px,78vw)!important;height:auto;aspect-ratio:800/477} html body #gate .gate-title{font-size:30px!important;line-height:1.1!important;margin:4px 0 2px!important;color:#eaf2fb!important;-webkit-text-fill-color:#eaf2fb!important;text-shadow:none!important} html body #gate .gate-title .yel{color:#ffe14a!important;-webkit-text-fill-color:#ffe14a!important} html body #gate .gate-tag{background:transparent!important;box-shadow:none!important;border:0!important;color:#c9d7e8!important;font-size:17px!important;margin:0 0 10px!important;padding:0!important} html body #gate .gate-idle{background:#22384f!important;color:#ffd58a!important;border-radius:12px;padding:8px 12px} html body #gate #gateAuth{width:min(420px,100%);box-sizing:border-box;margin:4px auto 6px;padding:16px 16px 12px;border-radius:18px;background:linear-gradient(180deg,#13233a,#0f1c2e);border:1px solid #2e4a66;box-shadow:0 6px 20px rgba(0,0,0,.35)} html body #gate #gateAuth label,html body #gate #gateAuth legend,html body #gate #gateAuth .gate-switch,html body #gate #gateAuth .gate-hint{color:#eaf2fb!important;font-weight:800;font-size:16px} html body #gate #gateAuth input,html body #gate #gateAuth select{min-height:48px;box-sizing:border-box;border-radius:12px!important;border:2px solid #3b4c63!important;background:#f7f9fb!important;color:#0f1c2e!important;font-size:17px!important} html body #gate #gateAuth input:focus,html body #gate #gateAuth select:focus{border-color:#ffe14a!important;outline:none} html body #gate #gateAuth .gate-go{min-height:56px;border-radius:16px!important;background:linear-gradient(180deg,#6fcf3e,#3f9a22)!important;color:#0d2a08!important;-webkit-text-fill-color:#0d2a08!important;font-weight:900!important;font-size:19px!important;border:0!important;margin-top:8px} html body #gate #gateAuth .gate-forgot,html body #gate #gateAuth .gate-switch button{color:#ffe14a!important;-webkit-text-fill-color:#ffe14a!important;min-height:44px;font-weight:800;background:transparent!important} html body #gate #gateAuth .gate-err{color:#ffb4a8!important}html body #gate #gateAuth .gate-msg{color:#c9ff8f!important} @keyframes gateMsgIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}} html body #gate #gateMsg.gate-msg-again{animation:gateMsgIn .35s ease} html body #gate #gateSignIn:disabled{opacity:.72;cursor:progress} html body #gate > #gateGuest{position:relative;z-index:3} html body #gate .gate-guest{width:min(420px,100%)!important;min-height:60px;border-radius:16px!important;background:#22384f!important;border:2px solid #3b4c63!important;color:#eaf2fb!important;-webkit-text-fill-color:#eaf2fb!important;box-shadow:none!important;font-size:20px!important} html body #gate .gate-guest .gate-guest-sub{color:#c9d7e8!important;-webkit-text-fill-color:#c9d7e8!important;font-size:14px!important} html body #gate .zero-value{color:#c9d7e8!important;background:transparent!important;font-size:14px!important;max-width:420px} html body #gate .gate-founder{background:#13233a!important;color:#eaf2fb!important;border:1px solid #2e4a66!important;border-radius:16px!important} html body #gate .gate-founder h2{color:#ffe14a!important;-webkit-text-fill-color:#ffe14a!important} html body #gate .gate-scene img{border-radius:16px} html body #gate > #ppSignedOutBar{order:0} /* t7581u / 6f81287: the signed-out welcome hides Home and Settings. Other pages keep them. Music and Fireworks stay, at a 44px tap target. */ html:not(.signed-in):not(.guest-play) #gate > nav.site-nav.pp-toprow > .pp-tile-home, html:not(.signed-in):not(.guest-play) #gate > nav.site-nav.pp-toprow > .pp-set-btn{display:none!important} html:not(.signed-in):not(.guest-play) #gate .gate-title{text-transform:uppercase;letter-spacing:.02em} html:not(.signed-in):not(.guest-play) #gate .gate-tag{text-transform:uppercase;letter-spacing:.04em} html:not(.signed-in):not(.guest-play) #gate > picture, html:not(.signed-in):not(.guest-play) #gate > .gate-title, html:not(.signed-in):not(.guest-play) #gate > .gate-tag{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important} html:not(.signed-in):not(.guest-play) #gate{display:flex!important;flex-direction:column!important;align-items:center} html:not(.signed-in):not(.guest-play) #gate > .gate-scene{order:2!important;width:min(1100px,100%);height:auto;margin:0 auto;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} html:not(.signed-in):not(.guest-play) #gate > .gate-scene img{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center top;display:block;border-radius:0!important;mask-image:none;-webkit-mask-image:none;background:transparent!important} html:not(.signed-in):not(.guest-play) #gate > #gateAuth{order:3!important;width:min(420px,100%)} html:not(.signed-in):not(.guest-play) #gate > #gateGuest{order:4!important} html:not(.signed-in):not(.guest-play) #gate > .zero-value{order:5!important;display:block!important} html:not(.signed-in):not(.guest-play) #gate > nav.site-nav{order:1;position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:8px;right:8px;z-index:80;display:flex!important;justify-content:space-between;width:auto;max-width:none;margin:0;padding:0;background:none!important;pointer-events:none;grid-template-columns:none!important} html:not(.signed-in):not(.guest-play) #gate > nav.site-nav > .pp-tile-music, html:not(.signed-in):not(.guest-play) #gate > nav.site-nav > .pp-tile-fw{pointer-events:auto;order:0!important;width:auto!important;height:44px!important;min-height:44px!important;flex-direction:row!important;gap:4px!important;padding:0 10px!important;font-size:13px!important;border-radius:999px!important} html:not(.signed-in):not(.guest-play) #gate > nav.site-nav > .pp-tile-fw{margin-left:auto} [data-cast].is-speaking{transform-origin:50% 80%;animation:ppCastNod .42s steps(2,end) infinite} @keyframes ppCastNod{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(3px) rotate(1.5deg)}} @media (prefers-reduced-motion:reduce){[data-cast].is-speaking{animation:none}} /* Signed-out gate (owner 11/05): logo, tagline, tappable Tommy and Pinky, one sign-in form, the small footer. No second Sign in, no Ask card, no brand-new paragraph, no arrows. The skit stays in the page, under the form. */ html:not(.signed-in):not(.guest-play) body:has(#gate) #ppSignedOutBar, html:not(.signed-in):not(.guest-play) body:has(#gate) #gate > .gate-note, html:not(.signed-in):not(.guest-play) body:has(#gate) #gate > .founder-wrap, html:not(.signed-in):not(.guest-play) body:has(#gate) #gate > .gate-pills, html:not(.signed-in):not(.guest-play) body:has(#gate) #gateRegBig, html:not(.signed-in):not(.guest-play) body:has(#gate) .pp-nav, html:not(.signed-in):not(.guest-play) body:has(#gate) .talk-bots, html:not(.signed-in):not(.guest-play) body:has(#gate) [data-pp-auth-tile]{display:none!important} html:not(.signed-in):not(.guest-play) #gocOpener{position:static!important;border:0!important;box-shadow:none!important;background:transparent!important;margin:4px auto 8px!important;padding:0!important;max-width:420px;pointer-events:none} html:not(.signed-in):not(.guest-play) #gocOpener .goc-opener-who, html:not(.signed-in):not(.guest-play) #gocOpener .goc-opener-line, html:not(.signed-in):not(.guest-play) #gocOpener .goc-opener-hist, html:not(.signed-in):not(.guest-play) #gocOpener .goc-skit-play{display:none!important} html:not(.signed-in):not(.guest-play) #gocOpener .goc-opener-ai{display:block!important;text-align:center;font-size:14px;margin:0!important} html:not(.signed-in):not(.guest-play) #gate .gate-scene{position:relative;order:5} html:not(.signed-in):not(.guest-play) #gate > .gate-scene > .gate-fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none} html:not(.signed-in):not(.guest-play) #gateTheme{display:none!important} html:not(.signed-in):not(.guest-play) #gate .gate-hear{position:absolute;top:0;bottom:0;left:0;width:50%;margin:0;padding:0;border:0;background:transparent;color:transparent;cursor:pointer} html:not(.signed-in):not(.guest-play) #gate .gate-hear-p{left:50%} html:not(.signed-in):not(.guest-play) #gateVoiceCap{text-align:center;font-weight:700;margin:6px auto;max-width:420px} html:not(.signed-in):not(.guest-play) #gateGuest{display:block!important;width:min(420px,100%);margin:8px auto} /* must-exist: the eye sits beside the password box, not on top of it (no overlapping tap targets) */ html body #gate .gate-pass{display:flex;align-items:center;gap:6px} html body #gate .gate-pass input{flex:1 1 auto;width:auto!important;min-width:0;padding-right:12px!important} html body #gate .gate-pass .gate-eye{position:static;transform:none;flex:0 0 44px;color:#ffe14a} html body #gate .gate-guest .gate-guest-main,html body #gate .gate-guest-main{color:#eaf2fb!important;-webkit-text-fill-color:#eaf2fb!important} html body #gate .gate-tag *,html body #gate .gate-tag{color:#c9d7e8!important;-webkit-text-fill-color:#c9d7e8!important} html body #gate > .site-nav{order:0} html:root body #gate p.gate-tag > span,html:root body #gate p.gate-tag{color:#c9d7e8!important;-webkit-text-fill-color:#c9d7e8!important} html:root body #gate .gate-title .yel{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important} html:root body #gate .gate-title,html:root body #gate .gate-title .gate-line{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important} /* 1S: solid fill already set; drop the clipped gradient so the title sits on the navy page */ /* 1S contrast (top-row light theme): skit opener + Ask panel heading sit on the navy sign-in page, so light ink in both themes */ html:not(.signed-in):not(.guest-play) #gate .goc-opener,html:not(.signed-in):not(.guest-play) #gate .goc-opener :is(span,b,strong,em,p,div,button,small,h2,h3),html:not(.signed-in):not(.guest-play) #gate #gocSkitSpace :is(span,b,strong,em,p,div,button,small),html:not(.signed-in):not(.guest-play) #tbH{color:#eaf2fb!important;-webkit-text-fill-color:#eaf2fb!important} html:not(.signed-in):not(.guest-play) #gate .talk-bots > h2,html:not(.signed-in):not(.guest-play) #gate .talk-bots :is(.tb-aichar,.tb-legal,.tb-sub,.tb-pref,label[for=tbQ]),html:not(.signed-in):not(.guest-play) #gate .talk-bots .ai-tag{color:#eaf2fb!important;-webkit-text-fill-color:#eaf2fb!important} html:not(.signed-in):not(.guest-play) #gate .talk-bots p a{color:#ffe14a!important;-webkit-text-fill-color:#ffe14a!important} /* Phone widths, including portrait. The 48px object-fit:cover crop (object-position 30%) kept only the tops of Tommy's and Pinky's heads inside the white frame. The photo is 1080x438; show the whole frame. */ @media (max-width:820px){ html:not(.signed-in):not(.guest-play) #gate{padding:2px 12px 0!important} html:not(.signed-in):not(.guest-play) #gate > picture{margin:0!important;line-height:0;display:block} html:not(.signed-in):not(.guest-play) #gate .gate-logo.goc-crest{max-height:72px!important;width:auto!important;height:72px!important;margin:0 auto 2px!important} html:not(.signed-in):not(.guest-play) #gate .gate-title{margin:0!important} html:not(.signed-in):not(.guest-play) #gate .gate-tag{margin:0!important} html:not(.signed-in):not(.guest-play) #gate .gate-logo.goc-crest{max-height:72px!important;width:auto!important;height:72px!important;margin:0 auto 2px!important} html:not(.signed-in):not(.guest-play) #gate #gocOpener{margin:0 auto 2px!important} html:not(.signed-in):not(.guest-play) #gate #gateAuth{padding:4px 10px 2px;margin:2px auto} html:not(.signed-in):not(.guest-play) #gate .gate-form{gap:0} html:not(.signed-in):not(.guest-play) #gate #gateAuth label{font-size:13px;line-height:1.05;margin:0} html:not(.signed-in):not(.guest-play) #gate #gateAuth input,html:not(.signed-in):not(.guest-play) #gate #gateAuth select{min-height:40px!important} html:not(.signed-in):not(.guest-play) #gate #gateAuth .gate-go{min-height:44px!important;margin-top:2px!important} html:not(.signed-in):not(.guest-play) #gate #gateAuth .gate-forgot,html:not(.signed-in):not(.guest-play) #gate #gateAuth .gate-switch{min-height:32px;margin:0;line-height:1.1} html:not(.signed-in):not(.guest-play) #gate .gate-guest{min-height:44px!important;margin:2px auto!important;padding:2px 10px!important} html:not(.signed-in):not(.guest-play) #gate .gate-guest .gate-guest-sub{line-height:1.15!important} } @media (max-width:820px) and (max-height:600px){ html:not(.signed-in):not(.guest-play) #gate .gate-logo.goc-crest{max-height:36px!important;height:36px!important} html:not(.signed-in):not(.guest-play) #gate .gate-tag{line-height:1.1!important} html:not(.signed-in):not(.guest-play) #gate .gate-scene{height:auto;overflow:visible} html:not(.signed-in):not(.guest-play) #gate #gocOpener{margin:0 auto!important} html:not(.signed-in):not(.guest-play) #gate #gocOpener .goc-opener-ai{font-size:12px!important;line-height:1.15!important} html:not(.signed-in):not(.guest-play) #gate #gateAuth{padding:2px 8px;margin:0 auto} html:not(.signed-in):not(.guest-play) #gate #gateAuth input,html:not(.signed-in):not(.guest-play) #gate #gateAuth select{min-height:32px!important} html:not(.signed-in):not(.guest-play) #gate #gateAuth .gate-forgot,html:not(.signed-in):not(.guest-play) #gate #gateAuth .gate-switch{min-height:28px} html:not(.signed-in):not(.guest-play) #gate .gate-guest{min-height:44px!important;margin:0 auto!important} html:not(.signed-in):not(.guest-play) #gate .gate-guest .gate-guest-sub{font-size:11px!important} } /* MF-B02 (t8386 r2): iPhone Safari composites a playing