body{margin:0;place-items:center;height:100vh;background-image:url(/board.jpg);background-size:cover;font-family:Protest Strike,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}.header{height:50px;background-color:#222;box-shadow:0 0 12px #000000bf;width:100%;display:grid;grid-auto-flow:column;grid-template-columns:50px auto 50px}.gameName{color:#767676;margin:auto;font-size:25px}#profile{width:80%;margin:auto;padding:0;border:0;background-color:transparent}.rulesImg,.profileImg{margin:auto;width:90%;border-radius:100px}#rules{width:80%;margin:auto;padding:0;border:0;background-color:transparent}.popup{position:fixed;width:100%;height:100vh;background-color:#000000bf;z-index:1;display:grid;z-index:5}.popupInner{margin:10px auto auto;background-color:#fff;border-radius:10px;box-shadow:0 0 12px #000000bf;padding:10px;width:90%;max-width:400px;position:relative;display:grid}.gameBody{display:grid;grid-template-rows:50px 370px 100px 90px;width:100%;margin:auto}.cards{display:grid;grid-auto-flow:column;gap:10px;justify-content:center;align-items:center;margin:auto}.cards,.boardCards{display:flex;justify-content:center;align-items:center;gap:10px}.p1{grid-column:1;grid-row:3;transform:rotate(0);margin:auto auto 0;display:flex;gap:10px;min-height:100px}.cardBtn{width:75px;aspect-ratio:100 / 140;padding:0;border:0;background:transparent;margin:auto;display:grid}.selectBtn{width:100%;height:100%;z-index:1;grid-row:1;grid-column:1;display:grid;background-color:#00000080;visibility:hidden;border-radius:6px;position:relative}.selectText{color:#fff;margin:auto;font-family:Protest Strike,sans-serif;font-size:30px}.boardCard{min-width:75px}.playerCard{transition:transform .25s ease}.playerCard:hover{transform:scale(1.2)}.cardImg{width:100%;height:100%;border-radius:6px;box-shadow:0 0 12px #000000bf;overflow:hidden;grid-row:1;grid-column:1}.newCardAnim{animation:playerCardImgAnim 1s ease-in-out forwards}@keyframes playerCardImgAnim{0%{transform:scale(0)}25%{transform:scale(1.3)}50%{transform:scale(.9)}to{transform:scale(1)}}.animCard{animation:cardWiggle 4s ease-in-out infinite;animation-delay:calc(var(--offset, 0) * -1s);animation-duration:calc(3.5s + (var(--speed, 0) * 1s));transform-origin:center}.cardInner{width:100%;height:100%;display:grid;position:relative}.cardFunction{position:absolute;top:-25%;background-color:#fff;width:100%;aspect-ratio:1/.3;border-radius:6px;display:flex;box-shadow:0 0 12px #000000bf;visibility:hidden;box-sizing:border-box;color:#000}.specialCardFunction{background-color:#222;color:#fff;border:2px solid white}.bustCardFunction{color:#d95763;border:2px solid #d95763}.cardFunctionText{font-size:14px;font-weight:700;margin:auto}@keyframes cardWiggle{0%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}to{transform:rotate(-1.5deg) translateY(0)}}#table{position:relative;height:300px;aspect-ratio:1/1;margin:20px auto auto;place-items:center;display:grid}.turnRing{position:absolute;inset:0;border-radius:50%;mask:radial-gradient(circle,transparent 54%,black 73%);-webkit-mask:radial-gradient(circle,transparent 54%,black 73%);pointer-events:none;animation:spinRingClockwise 10s linear infinite;transform-origin:center;z-index:1}.turnRingClockwise{background:conic-gradient(#0000 0deg 180deg,#00000080 360deg)}.turnRingCounterClockwise{background:conic-gradient(#00000080,#0000 180deg 360deg)}@keyframes spinRingClockwise{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.board{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);display:grid;gap:10px;width:100%}#score{margin:auto;color:#fff;text-shadow:0 0 12px rgba(0,0,0,.75);font-size:50px}.boardCards{display:flex;gap:12px}.players{position:relative;inset:0;width:96%;height:96%}.player{position:absolute;width:15%;height:15%;--angle: calc((360deg / var(--count) * var(--i)) + 90deg);--radius: 42%;left:calc(50% + (var(--radius) * cos(var(--angle))));top:calc(50% + (var(--radius) * sin(var(--angle))));transform:translate(-50%,-50%);border-radius:50%;background:#222;color:#fff;display:grid;place-items:center;box-shadow:0 0 10px #0009;z-index:3;transition:left .5s ease-out,top .5s ease-out,background .3s}@keyframes playerPopIn{0%{opacity:0}to{opacity:1}}.player.new{animation:playerPopIn 1s ease-out forwards}.playerSvg{width:100%;border-radius:100px;color:var(--icon-color, #767676)}.playerSvg *{fill:currentColor!important;transition:color 1s}.player.active{border:4px solid rgb(255,255,255);color:#000;box-shadow:0 0 20px #fff}#copyRoomId{border:0;background-color:transparent;padding:0;display:grid;grid-auto-flow:column;grid-template-columns:auto 20px;margin:auto;gap:10px}#roomId{color:#ffffffa4;margin:auto;font-size:30px}#roomIdImg{margin:auto}.acePopup{display:grid;width:70%;gap:10px;margin-top:100px}.popupBtn{width:100%;height:50px;font-weight:700;font-size:30px;font-family:Protest Strike,sans-serif;box-shadow:0 0 10px #0009;border-radius:10px;color:#fff;background-color:#222;border:1px solid white}#joinRandom{margin-top:20px;width:300px}.specialCards{display:grid;gap:10px}.rulesCardImg{width:70px}.row{margin:auto auto auto 0;display:grid;grid-template-columns:100px auto;width:100%;height:50px;background-color:#d4d4d4;border-radius:10px}.row h3{margin:auto}.row p{margin:auto auto auto 0}.popupHeader{display:grid;grid-template-columns:auto 50px}.popupHeader h2{margin:auto auto auto 0}.closePopupBtn{border:0;background:transparent;margin:auto 0 auto auto;padding:0}.closePopupBtn img{width:30px}#discardPile{position:relative}.discardCard{position:absolute;inset:0;transform:translate(var(--x),var(--y)) rotate(var(--rot));animation:discardDrop .22s ease-out;transform-origin:center;pointer-events:none}.discardCard:last-child{z-index:10}@keyframes discardDrop{0%{transform:translate(calc(var(--x) * 2),calc(var(--y) * -3)) rotate(calc(var(--rot) * 1.4)) scale(1.05);opacity:0}to{transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(1);opacity:1}}.emoji-bar{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:15px;padding:10px 20px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;border:1px solid rgba(255,255,255,.2);height:35px;width:290px;margin:auto}.emoji-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.emoji-btn:hover{transform:scale(1.4) translateY(-5px)}.emoji-btn:active{transform:scale(.9)}.floating-emoji{position:fixed;font-size:33px;pointer-events:none;z-index:2000;animation:floatUpAndFade 2s forwards}@keyframes floatUpAndFade{0%{transform:translateY(0) scale(.5);opacity:0}50%{transform:translateY(-20px) scale(1.2);opacity:1}to{transform:translateY(-120px) scale(1);opacity:0}}.player.dead{pointer-events:none}.dead-icon{background:#fff;border-radius:50%;width:60%;aspect-ratio:1/1;position:absolute;top:-7px;right:-7px;padding:2px;border:2px solid black}.player.dead.active{outline:none;box-shadow:none}#winnerText{text-align:center}@keyframes cardFlyOut{to{transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--fly-rot));opacity:0}}.card-scatter{animation:cardFlyOut 1s ease-in forwards;pointer-events:none}.playerCard{transition:transform .3s,opacity .3s,filter .3s}.playerCard.not-my-turn{opacity:.6;filter:brightness(.7)}.draw-anim-card{position:fixed;z-index:1000;width:80px;aspect-ratio:100 / 140;pointer-events:none;transition:all .6s cubic-bezier(.19,1,.22,1);transform-style:preserve-3d}.draw-anim-card.flipping{transform:rotateY(180deg)}.draw-anim-card img{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:6px;box-shadow:0 5px 15px #0000004d}.draw-anim-card .back{transform:rotateY(0)}.draw-anim-card .front{transform:rotateY(180deg)}.holo{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:6px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%),linear-gradient(90deg,red,orange,#ff0,#0f0,#0ff,#00f,violet,red);background-size:500% 500%,500% 250%;background-repeat:repeat,repeat;mix-blend-mode:color;opacity:.8;filter:saturate(1.5);animation:holoMove 10s linear infinite}@keyframes holoMove{0%{background-position:0% 0%,0% 50%}to{background-position:250% 0%,250% 50%}}#placementText{margin:30px auto 40px;text-align:center;font-size:40px}