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}.header{height:50px;background-color:#222;width:100%;display:grid;grid-auto-flow:column;grid-template-columns:50px auto 50px}#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;display:none;z-index:5}.popupInner{margin:auto;background-color:#fff;border-radius:10px;box-shadow:0 0 12px #000000bf;padding:10px;width:80%;max-width:400px;position:relative}.gameBody{display:grid;grid-template-rows:50px 3.2fr 1fr;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}.cardBtn{width:100%;max-width:clamp(60px,10vw,120px);min-width:80px;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}.selectText{color:#fff;margin:auto;font-family:Protest Strike,sans-serif;font-size:30px}.boardCard{min-width:70px}.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}.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}@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:clamp(300px,50vw,400px);aspect-ratio:1/1;margin:auto;place-items:center;display:grid}.turnRing{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#00f0 0deg 30deg,#00f0 90deg 180deg,#00000080 360deg);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}@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}#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}.playerImg{width:90%;border-radius:100px}.player.active{background:#fff;color:#000;box-shadow:0 0 15px #fff}#lobbyPopup .popupInner{display:grid;gap:12px;width:240px;text-align:center;z-index:5;margin-top:100px;width:80%}#lobbyPopup input{padding:8px;font-size:20px;text-align:center;border:3px solid black;height:30px}#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:#000}.specialCards{display:grid;grid-template-columns:1fr 1fr}.rulesCardImg{width:70px}.row{margin:auto auto auto 0}.row h3{margin:0}.closePopupBtn{position:absolute;right:10px;top:20px}