Webleb - UI Elements - coin flip game

</body>

body {
 margin: 0;
 padding: 0;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
 font-family: Arial, sans-serif;
}
/*container do jogo*/
.game-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content:center;
 gap: 50px;
}
/*container do cilindro com scaleY para ajustar a altura sem deformar */
.cylinder-container {
 transform-style: preserve-3d;
 transform:rotateX(0) scaleY(0.35);
}
/*animacao para o cilindro agrupado */
.cylinder-container.flipping {
 animation: flipflip 2s linear forwards;
}

@keyframes flipflip{
 0%{
  transform: translateY(0) rotateX(0) scaleY(0.35);
 }
 50%{
  transform: translateY(-300px) rotateX(1080deg) scaleY(0.35);
 }
 100%{
  transform: translateY(0) rotateX(0) scaleY(0.35);
 }
}
/*segmentos formando 360deg para fazer um cilindro com altura reduzida (moeda)*/
.cylinder-nano-segment{
 position: absolute;
 width: 2.5px;
 height: 30px;
 left: 55.5px;
 top: 0;
 transform-origin: 6px 150px;
 background: gold;
 border: 2px solid goldenrod;
}
/*tudo */  
.cylinder-nano-segment:nth-child(1) {
 transform: rotateY(0deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(2) {
 transform: rotateY(6deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(3) {
 transform: rotateY(12deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(4) {
 transform: rotateY(18deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(5) {
 transform: rotateY(24deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(6) {
 transform: rotateY(30deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(7) {
 transform: rotateY(36deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(8) {
 transform: rotateY(42deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(9) {
 transform: rotateY(48deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(10) {
 transform: rotateY(54deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(11) {
 transform: rotateY(60deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(12) {
 transform: rotateY(66deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(13) {
 transform: rotateY(72deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(14) {
 transform: rotateY(78deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(15) {
 transform: rotateY(84deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(16) {
 transform: rotateY(90deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(17) {
 transform: rotateY(96deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(18) {
 transform: rotateY(102deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(19) {
 transform: rotateY(108deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(20) {
 transform: rotateY(114deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(21) {
 transform: rotateY(120deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(22) {
 transform: rotateY(126deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(23) {
 transform: rotateY(132deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(24) {
 transform: rotateY(138deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(25) {
 transform: rotateY(144deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(26) {
 transform: rotateY(150deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(27) {
 transform: rotateY(156deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(28) {
 transform: rotateY(162deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(29) {
 transform: rotateY(168deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(30) {
 transform: rotateY(174deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(31) {
 transform: rotateY(180deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(32) {
 transform: rotateY(186deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(33) {
 transform: rotateY(192deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(34) {
 transform: rotateY(198deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(35) {
 transform: rotateY(204deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(36) {
 transform: rotateY(210deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(37) {
 transform: rotateY(216deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(38) {
 transform: rotateY(222deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(39) {
 transform: rotateY(228deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(40) {
 transform: rotateY(234deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(41) {
 transform: rotateY(240deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(42) {
 transform: rotateY(246deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(43) {
 transform: rotateY(252deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(44) {
 transform: rotateY(258deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(45) {
 transform: rotateY(264deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(46) {
 transform: rotateY(270deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(47) {
 transform: rotateY(276deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(48) {
 transform: rotateY(282deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(49) {
 transform: rotateY(288deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(50) {
 transform: rotateY(294deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(51) {
 transform: rotateY(300deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(52) {
 transform: rotateY(306deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(53) {
 transform: rotateY(312deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(54) {
 transform: rotateY(318deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(55) {
 transform: rotateY(324deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(56) {
 transform: rotateY(330deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(57) {
 transform: rotateY(336deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(58) {
 transform: rotateY(342deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(59) {
 transform: rotateY(348deg) translateZ(60px);
}
.cylinder-nano-segment:nth-child(60) {
 transform: rotateY(354deg) translateZ(60px);
}
/*tampas da moeda e emoji de cara e coroa no before delas*/
.cylinder-nano-top{
 border: 1px solid goldenrod;
 background: gold;
 position: absolute;
 width: 120px;
 height: 120px;
 border-radius: 50%;
 top: -60px;
 left: 0;
 transform: rotateX(90deg);
 display: flex;
 flex-direction:column;
 align-items: center;
 justify-content: center;
}

.cylinder-nano-bottom{
 border: 1px solid goldenrod;
 background: gold;
 position: absolute;
 width: 120px;
 height:120px;
 border-radius: 50%;
 top: -30px;
 left: 0;
 transform: rotateX(90deg);
 display: flex;
 flex-direction:column;
 align-items: center;
 justify-content: center;
}

.cylinder-nano-bottom::before {
 content: 'head';
 font-size: 60px;
 opacity: 0.6;
 filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ffed4e) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.cylinder-nano-top::before {
 content: 'tail';
 font-size: 60px;
 opacity: 0.6;
 filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 20px #ffed4e) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
/*botao play */
.play-button {
 background: lime;
 border: none;
 color: white;
 padding: 10px 30px;
 left: 62px;
 font-size: 15px;
 font-weight: bold;
 border-radius: 50px;
 cursor: pointer;
 box-shadow: 0 8px 15px rgba(0,0,0,0.2);
 transition: all 0.3s ease;
 text-transform: uppercase;
 letter-spacing: 1px;
 position: relative;
 overflow: hidden;
}

.play-button:active {
 transform: translateY(0);
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.play-button.disabled {
 background: darkgreen;
 cursor: not-allowed;
 transform: none;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/*texto aparecendo */
.result {
 position:relative;
 left: 62px;
 top:20px;
 font-size: 20px;
 font-weight: bold;
 color: white;
 opacity: 0;
 animation-fill-mode: forwards;
}

.result.show {
 animation: fadeInResult 0.8s ease-in-out 2.2s forwards;
}
/*animacao texto aparecendo */
@keyframes fadeInResult {
 from {
  opacity: 0;

}
 to {
  opacity: 1;
 }
}

Validating your code, please wait...

HTML

CSS

</body>

.play-button:active {
 transform: translateY(0);
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.result.show {
 animation: fadeInResult 0.8s ease-in-out 2.2s forwards;
}
/*animacao texto aparecendo */
@keyframes fadeInResult {
 from {
  opacity: 0;

}
 to {
  opacity: 1;
 }
}