/* Look at Me */
.lam{position:absolute;inset:0;background:#fde402;color:#111;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow:hidden}
.lam .bang{font-family:Bangers,Impact,"Arial Black",sans-serif;letter-spacing:.03em;font-weight:400}
.lam .scr{position:absolute;inset:0}
.lam .grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);background:#111;gap:3px}
.lam .grid div{position:relative;overflow:hidden}
.lam .grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s}
.lam .hdr{position:absolute;left:0;top:0;width:430px;height:163px}
.lam .mid{position:absolute;left:0;top:163px;width:430px;height:511px;padding:12px 14px 14px}
.lam .cam{position:relative;width:100%;height:100%;border:5px solid #111;background:#cfcfcf;overflow:hidden;border-radius:4px}
.lam .bot{position:absolute;left:0;bottom:0;width:430px;height:258px;background:url(/img/lam/yellow_box.webp) center/cover;border-top:5px solid #111;overflow:hidden}
.lam .body{position:absolute;left:0;top:163px;width:430px;height:769px;overflow:hidden}
.lam .tall{position:absolute;inset:6px 8px 8px;background:url(/img/lam/yellow_box_tall.webp) center/100% 100% no-repeat}
.lam .selfcam{position:absolute;inset:0;background:#2b2b2b;overflow:hidden}
.lam .selfcam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.lam .live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2b2b2b}
.lam .meterbox{position:absolute;right:8px;top:8px;width:84px;z-index:3}
.lam .meterbox svg{width:100%;height:auto;display:block}
.lam .blinkbox{position:absolute;left:50%;bottom:10px;width:250px;margin-left:-125px;z-index:3}
.lam .blinkbox svg{width:100%;height:auto;display:block}
.lam .tag{position:absolute;left:10px;bottom:10px;z-index:3;background:#fff;border:3px solid #111;border-radius:20px;padding:2px 14px 0;font-size:24px}
.lam .tag small{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:-2px;padding-bottom:3px;color:#555}
.lam .busted{position:absolute;left:50%;top:44%;z-index:4;transform:translate(-50%,-50%) rotate(-6deg);background:#e2231a;color:#fff;border:5px solid #111;border-radius:40px;padding:6px 24px 2px;font-size:44px;white-space:nowrap;-webkit-text-stroke:1.5px #111;paint-order:stroke fill;animation:lamPop .35s cubic-bezier(.2,1.6,.4,1) both}
.lam .capture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lam .over{position:absolute;right:-6px;bottom:-4px;width:230px;z-index:3}
.lam .bubble{position:absolute;width:300px;height:115px;background:url(/img/lam/lam_speech_bubble_blank.webp) center/contain no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px 22px;text-align:center}
.lam .bubble .bang{font-size:30px;line-height:1;color:#000}
.lam .bubble small{font-size:14px;margin-top:4px;color:#000}
.lam .cdnum{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);text-align:center;font-size:150px;line-height:1;color:#fff;-webkit-text-stroke:10px #000;paint-order:stroke fill;text-shadow:7px 7px 0 #000}
.lam .btnimg{cursor:pointer;transition:transform .15s}
.lam .btnimg:active{transform:scale(.97)}
.lam .btnimg.off{opacity:.35;pointer-events:none;filter:grayscale(1)}
.lam .endbtns{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;align-items:center;gap:10px;z-index:5}
.lam .lpill{display:inline-block;background:#e2231a;color:#fff;border:4px solid #111;border-radius:40px;padding:6px 18px 1px;font-size:24px;cursor:pointer;-webkit-text-stroke:1px #111;paint-order:stroke fill;box-shadow:4px 4px 0 #111}
.lam .lpill:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.lam .textbox{position:absolute;z-index:4;width:250px;height:133px;background-size:contain;background-repeat:no-repeat;background-position:center;display:flex;align-items:center;justify-content:center;color:#111;font-size:34px;line-height:.95;text-align:center;padding:10px 26px 22px;-webkit-text-stroke:6px #fff;paint-order:stroke fill}
.lam .lobby-logo{position:absolute;left:50%;top:22px;width:340px;margin-left:-170px;z-index:2}
.lam .games{position:absolute;left:0;right:0;top:232px;display:grid;gap:10px;justify-items:center;z-index:2}
.lam .games img{width:380px;cursor:pointer;transition:transform .15s;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.lam .games img.chosen{transform:scale(1.1)}
.lam .howto-img{position:absolute;top:163px;left:50%;height:597px;transform:translateX(-50%)}
.lam .empty{position:absolute;left:0;bottom:0;width:430px;height:172px}
.lam .letsplay{position:absolute;left:50%;bottom:6px;width:390px;margin-left:-195px;cursor:pointer}
.lam .caps{display:grid;gap:7px;justify-items:center}
.lam .cap{position:relative;width:340px;height:60px;border:0;padding:0;background:none;cursor:pointer;font:600 19px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#111}
.lam .cap img{position:absolute;inset:0;width:100%;height:100%;transition:filter .2s}
.lam .cap span{position:relative}
.lam .cap.sel img{filter:hue-rotate(150deg) saturate(1.6) brightness(1.05)}
.lam .cap.sel span{color:#fff;font-weight:800}
.lam .cap:disabled{cursor:default}
.lam .cap.right img{filter:hue-rotate(60deg) saturate(1.5)}
.lam .cap .who{position:absolute;left:0;right:0;top:100%;margin-top:-4px;font-family:Bangers,Impact,sans-serif;font-size:15px;letter-spacing:.04em;color:#111;text-align:center}
.lam .cap .ok{position:absolute;left:-14px;top:50%;width:52px;margin-top:-26px;z-index:2}
.lam .ring{position:absolute;border-radius:50%;border:6px solid #111;overflow:hidden;background:#2b2b2b}
.lam .frame{position:absolute;border:5px solid #111;border-radius:6px;overflow:hidden;background:#2b2b2b}
.lam .frame > img{width:100%;height:100%;object-fit:cover}
.lam .big-t{font-size:30px;line-height:1;text-align:center;color:#111}
.lam .prompt{font-size:16px;line-height:1.35;text-align:center;color:#111}
.lam .strip{position:absolute;left:14px;right:14px;height:112px;overflow-x:auto;overflow-y:hidden;display:flex;gap:10px;padding:10px 6px;scroll-snap-type:x mandatory;background:#fffbed;border:5px solid #111;border-radius:16px;-webkit-overflow-scrolling:touch}
.lam .strip button{flex:none;width:84px;height:84px;border:0;padding:0;background:none;cursor:pointer;scroll-snap-align:center;position:relative;border-radius:50%}
.lam .strip button img{width:100%;height:100%}
.lam .strip button.sel{outline:5px solid #e2231a;outline-offset:2px}
.lam .reveal-rows{position:absolute;left:24px;right:24px;display:grid;gap:8px}
.lam .reveal-rows .row{display:flex;align-items:center;gap:10px;background:#fffbed;border:4px solid #111;border-radius:14px;padding:6px 10px}
.lam .reveal-rows .row img.e{width:50px;height:50px}
.lam .reveal-rows .row .n{font-size:20px;line-height:1.05;flex:1}
.lam .reveal-rows .row img.ck{width:46px}
.lam .order{position:absolute;left:0;right:0;display:grid;gap:8px;justify-items:center}
.lam .tb{position:relative;width:340px;height:49px;background:url(/img/lam/text_block.webp) center/100% 100% no-repeat}
.lam .tb .num{position:absolute;left:4.5%;top:0;width:11%;height:100%;display:grid;place-items:center;font-size:28px}
.lam .tb .nm{position:absolute;left:20%;top:0;height:100%;display:flex;align-items:center;font-size:24px;padding-top:3px}
.lam .tb .np{position:absolute;right:-26px;top:-24px;width:96px;animation:lamPop .4s both,lamPulse 1.2s .4s infinite}
.lam .tb.done{opacity:.55}
.lam .situ{position:absolute;background:url(/img/lam/blank_explosion.webp) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;padding:34px 70px;font-size:16px;line-height:1.3}
.lam .answer{position:absolute;left:30px;right:30px;font:600 20px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;padding:12px 14px;border:4px solid #111;border-radius:12px;background:#fff;color:#111;outline:none;resize:none}
.lam .revbox{position:absolute;left:50%;width:330px;margin-left:-165px;background:#fff;border:5px solid #111;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;font-size:21px;line-height:1.3;padding:16px}
.lam .revbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lam .by{position:absolute;left:50%;transform:translateX(-50%);background:#111;color:#fde402;border-radius:20px;padding:3px 16px 0;font-size:22px;white-space:nowrap}
.lam .score-rows{position:absolute;left:44px;right:44px;display:grid;gap:10px}
.lam .score-rows .row{display:flex;align-items:center;gap:12px;background:#fffbed;border:4px solid #111;border-radius:14px;padding:8px 14px}
.lam .score-rows .row i{width:22px;height:22px;border-radius:50%;border:3px solid #111}
.lam .score-rows .row .n{flex:1;font-size:26px}
.lam .score-rows .row .s{font-size:34px}
.lam .score-rows .row.top{background:#fff0a0}
.lam .camwarn{position:absolute;left:20px;right:20px;top:200px;z-index:20;background:#fffbed;border:4px solid #111;border-radius:16px;padding:18px;text-align:center;font-size:17px;box-shadow:6px 6px 0 #111}
.lam .camwarn button{margin-top:12px;background:#e2231a;color:#fff;border:3px solid #111;border-radius:30px;padding:10px 22px;font:700 18px "Helvetica Neue",sans-serif;cursor:pointer}
.lam .wait{position:absolute;left:30px;right:30px;font-size:18px;text-align:center}
@keyframes lamSlap{0%{transform:scale(3) rotate(-14deg);opacity:0}55%{transform:scale(.88) rotate(3deg);opacity:1}75%{transform:scale(1.07) rotate(-1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes lamInL{0%{transform:translateX(-470px)}70%{transform:translateX(14px)}85%{transform:translateX(-6px)}100%{transform:translateX(0)}}
@keyframes lamInR{0%{transform:translateX(470px)}70%{transform:translateX(-14px)}85%{transform:translateX(6px)}100%{transform:translateX(0)}}
@keyframes lamBurst{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(4deg);opacity:1}80%{transform:scale(.95)}100%{transform:scale(1) rotate(0)}}
@keyframes lamPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes lamPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes lamJiggle{0%,100%{transform:scale(1.08) rotate(0)}20%{transform:scale(1.08) rotate(-4deg)}40%{transform:scale(1.08) rotate(4deg)}60%{transform:scale(1.08) rotate(-3deg)}80%{transform:scale(1.08) rotate(2deg)}}
@keyframes lamSlideL{0%{transform:translateX(-470px)}75%{transform:translateX(10px)}100%{transform:translateX(0)}}
@keyframes lamCd{0%{transform:scale(0) rotate(-12deg)}60%{transform:scale(1.18) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes lamRise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes lamFade{from{opacity:0}to{opacity:1}}
.lam .a-slap{animation:lamSlap .7s cubic-bezier(.3,.7,.3,1) both}
.lam .a-inL{animation:lamInL .55s cubic-bezier(.2,.8,.3,1) both}
.lam .a-inR{animation:lamInR .55s cubic-bezier(.2,.8,.3,1) both}
.lam .a-burst{animation:lamBurst .6s cubic-bezier(.2,.9,.3,1) both}
.lam .a-pop{animation:lamPop .4s cubic-bezier(.2,1.6,.4,1) both}
.lam .a-pulse{animation:lamPop .45s cubic-bezier(.2,1.6,.4,1) both,lamPulse 1.1s .45s ease-in-out infinite}
.lam .a-jiggle{animation:lamJiggle .45s ease-in-out both}
.lam .a-slideL{animation:lamSlideL .5s cubic-bezier(.2,.8,.3,1) both}
.lam .a-cd{animation:lamCd .45s cubic-bezier(.2,1.4,.4,1) both}
.lam .a-rise{animation:lamRise .45s cubic-bezier(.2,.9,.3,1) both}
.lam .fadein{animation:lamFade .5s both}
