.elementor-3292 .elementor-element.elementor-element-122e1f8{--display:flex;--position:fixed;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-110px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;--z-index:99;}.elementor-3292 .elementor-element.elementor-element-122e1f8.e-con{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-3292 .elementor-element.elementor-element-122e1f8{left:0px;}body.rtl .elementor-3292 .elementor-element.elementor-element-122e1f8{right:0px;}.elementor-3292 .elementor-element.elementor-element-4b68598{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3292 .elementor-element.elementor-element-4b68598.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3292 .elementor-element.elementor-element-7b91db8{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:left;}.elementor-3292 .elementor-element.elementor-element-7b91db8 img{width:100%;}.elementor-3292 .elementor-element.elementor-element-6eab62c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3292 .elementor-element.elementor-element-6eab62c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-menu-toggle{margin-left:auto;background-color:#FF587F87;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu .elementor-item{font-family:"ADLaM Display", Sans-serif;font-size:26px;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a, .elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-menu-toggle{color:#FF587F;fill:#FF587F;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown{background-color:#FF587F00;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a:hover,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a:focus,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-menu-toggle:hover,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a:hover,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a:focus,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a.highlighted{background-color:#FF587F;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-nav-menu--dropdown a.elementor-item-active{color:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-7c5f1df{--display:flex;--min-height:200vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3292 .elementor-element.elementor-element-7c5f1df:not(.elementor-motion-effects-element-type-background), .elementor-3292 .elementor-element.elementor-element-7c5f1df > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at center center, #FF587F 0%, #B4183D 100%);}.elementor-3292 .elementor-element.elementor-element-53b52cf{margin:68px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-3292 .elementor-element.elementor-element-53b52cf .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:168px;font-weight:900;color:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-a373889{--display:flex;}.elementor-3292 .elementor-element.elementor-element-d5071ad{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;padding:0px 326px 0px 0px;text-align:center;}.elementor-3292 .elementor-element.elementor-element-d5071ad .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:30px;font-weight:900;color:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-8eecf2e{--display:flex;}.elementor-3292 .elementor-element.elementor-element-5ca4904{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;padding:0px 326px 0px 0px;text-align:center;}.elementor-3292 .elementor-element.elementor-element-5ca4904 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:30px;font-weight:900;color:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-6af03d7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3292 .elementor-element.elementor-element-8b5006c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;padding:0px 271px 0px 0px;text-align:center;}.elementor-3292 .elementor-element.elementor-element-8b5006c .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:30px;font-weight:900;color:#FFFFFF;}.elementor-3292 .elementor-element.elementor-element-7191a9b{--display:flex;}@media(min-width:768px){.elementor-3292 .elementor-element.elementor-element-4b68598{--width:20%;}.elementor-3292 .elementor-element.elementor-element-6eab62c{--width:80%;}}@media(max-width:767px){.elementor-3292 .elementor-element.elementor-element-122e1f8{--width:517px;}.elementor-3292 .elementor-element.elementor-element-4b68598{--width:50%;}.elementor-3292 .elementor-element.elementor-element-6eab62c{--width:50%;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;--margin-top:-1px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1.elementor-element{--align-self:center;}.elementor-3292 .elementor-element.elementor-element-b0f7ba1 .elementor-menu-toggle{border-radius:9px;}.elementor-3292 .elementor-element.elementor-element-7c5f1df{--min-height:200vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3292 .elementor-element.elementor-element-53b52cf{margin:68px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3292 .elementor-element.elementor-element-53b52cf .elementor-heading-title{font-size:105px;}.elementor-3292 .elementor-element.elementor-element-a373889{--margin-top:150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3292 .elementor-element.elementor-element-d5071ad{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -16px) 0px;padding:0px 0px 0px 12px;text-align:left;}.elementor-3292 .elementor-element.elementor-element-d5071ad .elementor-heading-title{font-size:30px;}.elementor-3292 .elementor-element.elementor-element-8eecf2e{--margin-top:150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3292 .elementor-element.elementor-element-5ca4904{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -16px) 0px;padding:0px 0px 0px 12px;text-align:left;}.elementor-3292 .elementor-element.elementor-element-5ca4904 .elementor-heading-title{font-size:30px;}.elementor-3292 .elementor-element.elementor-element-6af03d7{--margin-top:250px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3292 .elementor-element.elementor-element-8b5006c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -16px) 0px;padding:0px 0px 0px 12px;text-align:left;}.elementor-3292 .elementor-element.elementor-element-8b5006c .elementor-heading-title{font-size:30px;}.elementor-3292 .elementor-element.elementor-element-7191a9b{--margin-top:200px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-e10c3ee */#infinite-ttt{

    width:100%;
    max-width:480px;
    margin:auto;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

    color:white;

    user-select:none;

}


/* TOP */

.game-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

}


.game-top h1{

    font-size:32px;
    margin:0;

    font-weight:800;

}


/* TURN */

.turn-box{

    text-align:center;

}


.turn-box span{

    display:block;

    font-size:12px;

    opacity:.6;

    margin-bottom:6px;

}


#turnIndicator{

    width:50px;
    height:50px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:18px;

    font-size:26px;

    font-weight:900;

    background:
    rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

}


.turn-x{

    color:#FF587F;

}


.turn-o{

    color:#FFFFFF;

}



/* MODES */

.mode-buttons{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:20px;

}


.mode-btn{

    border:none;

    padding:10px 18px;

    border-radius:30px;

    color:white;

    cursor:pointer;

    background:
    rgba(255,255,255,.12);

    border:
    1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(20px);

    transition:.3s;

}


.mode-btn.active{

    background:white;

    color:black;

}



/* BOARD */

#board{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:16px;

    padding:22px;

    border-radius:35px;


    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,.05)
    );


    border:
    1px solid rgba(255,255,255,.2);


    backdrop-filter:
    blur(35px);


    box-shadow:

    inset 0 1px 2px rgba(255,255,255,.3),

    0 30px 80px rgba(0,0,0,.45);

}



/* CELLS */


.cell{

    aspect-ratio:1;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;


    background:

    rgba(255,255,255,.08);


    border:
    1px solid rgba(255,255,255,.15);


    transition:.25s;


}



.cell:hover{

    transform:
    translateY(-3px);

}



/* PIECES */


.mark{

    font-size:75px;

    font-weight:900;

    line-height:1;

    animation:
    appear .3s ease;

}



.mark.x{

    color:#FF587F;

    text-shadow:none;

}



.mark.o{

    color:#FFFFFF;

    text-shadow:none;

}



/* OLD PIECE BLINK ONLY */


.oldest{

    animation:
    blinkOld 1s infinite;

}


@keyframes blinkOld{

    0%,100%{

        opacity:1;

    }


    50%{

        opacity:.25;

    }

}



/* WIN */

.cell.win{

    animation:
    winnerCell .8s infinite alternate;

}



@keyframes winnerCell{


    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.08);

    }


}



@keyframes appear{


    from{

        opacity:0;

    }


    to{

        opacity:1;

    }


}



/* STATUS */


.game-status{

    text-align:center;

    margin-top:25px;

}


#status{

    opacity:.8;

}



#resetGame{

    margin-top:10px;

    padding:14px 35px;

    border:none;

    border-radius:40px;

    cursor:pointer;


    color:white;


    background:

    rgba(255,255,255,.15);


    backdrop-filter:
    blur(20px);


    border:
    1px solid rgba(255,255,255,.2);

}


/* MOBILE */

@media(max-width:600px){


.game-top h1{

    font-size:25px;

}


.mark{

    font-size:55px;

}


#board{

    padding:15px;

    gap:12px;

}


}
/* PARTY POPPER */

.party-particle{

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    pointer-events:none;

    animation:partyFly 1.2s ease-out forwards;

}


@keyframes partyFly{

0%{

    transform:
    translate(0,0)
    scale(1);

    opacity:1;

}


100%{

    transform:
    translate(var(--x),var(--y))
    rotate(720deg)
    scale(.2);

    opacity:0;

}

}



.win-burst{

    animation:
    winBomb .8s cubic-bezier(.2,1.5,.4,1);

}



@keyframes winBomb{


0%{

transform:scale(1);

}


40%{

transform:scale(1.25);

}


70%{

transform:scale(.95);

}


100%{

transform:scale(1);

}


}
.ttt-result{

position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.7);

z-index:99999;

animation:fadeIn .4s ease;

}



.ttt-result-card{

background:
linear-gradient(
145deg,
#222,
#000
);

padding:40px;

border-radius:30px;

text-align:center;

color:white;

box-shadow:
0 0 40px rgba(255,0,80,.6);

animation:
pop .5s ease;

}



.ttt-result-card h1{

font-size:55px;

color:#ff587f;

margin:0 0 15px;

}



.ttt-result-card button{

margin-top:20px;

padding:12px 30px;

border:none;

border-radius:30px;

background:#ff587f;

color:white;

font-size:18px;

cursor:pointer;

}



@keyframes pop{

0%{

transform:scale(.3);

}

100%{

transform:scale(1);

}

}



@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-78d4f8c *//* Container Layout */
.glossy-chess-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  padding: 24px 12px;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
}

.chess-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  gap: 12px;
}

/* Base Glossy Pill Button Style */
.chess-btn-primary {
  background: #FF587F;
  color: #FFFFFF;
  border: none;
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 88, 127, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chess-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 88, 127, 0.6);
}

/* Styled Dropdown Pill Button */
.chess-select-btn-wrapper {
  position: relative;
}

.chess-select-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  outline: none;
  font-family: inherit;
}

.chess-select-btn option {
  background: #FFFFFF;
  color: #333333;
  font-weight: 600;
  padding: 10px;
}

/* Status Bar - Pure White Text */
.chess-status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FF587F;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  backdrop-filter: blur(12px);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(255, 88, 127, 0.3);
}

.chess-status-bar span {
  color: #FFFFFF !important;
}

.chess-turn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #FF587F;
}

/* Glassmorphic iPhone Frame */
.chess-phone-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 12px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 88, 127, 0.15));
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 20px 40px rgba(255, 50, 100, 0.15),
    inset 0 0 15px rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}

/* Glass Chessboard */
.chess-glossy-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

.chess-square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 7.5vw, 38px);
  user-select: none;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}

.chess-square.light {
  background: #FFFFFF;
}

.chess-square.dark {
  background: #FF587F;
  color: #FFFFFF;
}

.chess-square::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}

/* Highlights */
.chess-square.selected {
  outline: 3px solid #111111;
  outline-offset: -3px;
  z-index: 2;
}

.chess-square.valid-move::before {
  content: "";
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  position: absolute;
  z-index: 3;
}

.chess-square.dark.valid-move::before {
  background: rgba(255, 255, 255, 0.7);
}

.chess-square.valid-capture {
  background: rgba(230, 0, 40, 0.45) !important;
}

.chess-square.in-check {
  background: rgba(255, 0, 0, 0.75) !important;
  animation: chess-pulse-check 1s infinite alternate;
}

@keyframes chess-pulse-check {
  0% { transform: scale(1); }
  100% { transform: scale(0.96); }
}

/* Piece Styling, Rotation & Smooth Animation */
.chess-piece {
  z-index: 5;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  display: inline-block;
  line-height: 1;
  position: relative;
  /* Smooth sliding animation property */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.chess-piece.rotate-180 {
  transform: rotate(180deg);
}

.chess-piece.white {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333, 0 3px 5px rgba(0,0,0,0.3) !important;
}

.chess-piece.black {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4) !important;
}

/* Move History Panel */
.chess-move-history-panel {
  width: 100%;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
}

.chess-history-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}

.chess-history-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 60px;
  overflow-y: auto;
  font-size: 13px;
  color: #333;
}

/* Modal Overlay */
.chess-promotion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.chess-promotion-overlay.chess-id-hidden {
  display: none;
}

.chess-promotion-card {
  background: #FFFFFF;
  padding: 24px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  min-width: 260px;
}

.chess-promotion-choices {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.chess-promotion-choices button {
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 12px;
  border: 1px solid #FF587F;
  background: #FFFFFF;
  color: #FF587F;
  cursor: pointer;
  transition: background 0.2s;
}

.chess-promotion-choices button:hover {
  background: #FF587F;
  color: #FFFFFF;
}

/* Fullscreen Confetti Overlay */
.chess-confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-27d7168 *//* All styles strictly scoped under #pkludoContainer */
#pkludoContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 16px 12px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  user-select: none;
}

#pkludoContainer * {
  box-sizing: border-box;
}

/* Header Dropdown Controls */
#pkludoContainer .pkludo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  gap: 12px;
}

#pkludoContainer .pkludo-select-wrapper {
  position: relative;
  flex: 1;
}

#pkludoContainer .pkludo-select-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: #2b79c2 !important;
  color: #FFFFFF !important;
  border: 2px solid #1c5286;
  padding: 8px 30px 8px 12px !important;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  outline: none;
  font-family: inherit;
}

#pkludoContainer .pkludo-select-btn option {
  background: #FFFFFF;
  color: #333333;
  font-weight: 600;
}

/* Dynamic Turn Status Bar */
#pkludoContainer .pkludo-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111a2e;
  border: 2px solid #233454;
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  margin-bottom: 12px;
}

#pkludoContainer .pkludo-turn-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

#pkludoContainer .pkludo-turn-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

#pkludoContainer .pkludo-turn-dot.red { background: #E52521; }
#pkludoContainer .pkludo-turn-dot.green { background: #008037; }
#pkludoContainer .pkludo-turn-dot.yellow { background: #FFD700; }
#pkludoContainer .pkludo-turn-dot.blue { background: #1C92EF; }

#pkludoContainer .pkludo-btn-reset {
  background: #e74c3c;
  border: none;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Board Outer Frame & 15x15 Grid Layout */
#pkludoContainer .pkludo-board-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000000;
  padding: 3px;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

#pkludoContainer .pkludo-board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  position: relative;
}

/* Corner Home Base Boxes */
#pkludoContainer .pkludo-base-box {
  position: absolute;
  width: 40%;
  height: 40%;
  padding: 8.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 1;
}

#pkludoContainer .pkludo-base-box.red-base { top: 0; left: 0; background-color: #E52521; }
#pkludoContainer .pkludo-base-box.green-base { top: 0; right: 0; background-color: #008037; }
#pkludoContainer .pkludo-base-box.blue-base { bottom: 0; left: 0; background-color: #1C92EF; }
#pkludoContainer .pkludo-base-box.yellow-base { bottom: 0; right: 0; background-color: #FFD700; }

#pkludoContainer .pkludo-base-inner {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border: 2px solid #000000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 8%;
  gap: 15%;
}

#pkludoContainer .pkludo-circle-spot {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pkludoContainer .red-base .pkludo-circle-spot { background-color: #E52521; }
#pkludoContainer .green-base .pkludo-circle-spot { background-color: #008037; }
#pkludoContainer .blue-base .pkludo-circle-spot { background-color: #1C92EF; }
#pkludoContainer .yellow-base .pkludo-circle-spot { background-color: #FFD700; }

/* Dynamic Player Labels */
#pkludoContainer .pkludo-player-label {
  position: absolute;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  letter-spacing: 0.5px;
}

#pkludoContainer .pkludo-player-label.top-label { top: 4px; left: 50%; transform: translateX(-50%); }
#pkludoContainer .pkludo-player-label.bottom-label { bottom: 4px; left: 50%; transform: translateX(-50%); }

/* FIXED Center Victory Home (Polygons prevent color spill onto yellow track) */
#pkludoContainer .pkludo-center-home {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%;
  border: 1px solid #000000;
  overflow: hidden;
  z-index: 2;
  background-color: #FFFFFF;
}

#pkludoContainer .pkludo-home-triangle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#pkludoContainer .pkludo-home-triangle.red {
  background-color: #E52521;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

#pkludoContainer .pkludo-home-triangle.green {
  background-color: #008037;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

#pkludoContainer .pkludo-home-triangle.yellow {
  background-color: #FFD700;
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}

#pkludoContainer .pkludo-home-triangle.blue {
  background-color: #1C92EF;
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}
/* Grid Track Cells */
#pkludoContainer .pkludo-cell {
  border: 1px solid #000000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}

/* Strict Color Assignment (High specificity prevents color overlap) */
#pkludoContainer .pkludo-cell.bg-red,
#pkludoContainer .bg-red { 
  background-color: #E52521 !important; 
}

#pkludoContainer .pkludo-cell.bg-green,
#pkludoContainer .bg-green { 
  background-color: #008037 !important; 
}

#pkludoContainer .pkludo-cell.bg-yellow,
#pkludoContainer .bg-yellow { 
  background-color: #FFD700 !important; 
}

#pkludoContainer .pkludo-cell.bg-blue,
#pkludoContainer .bg-blue { 
  background-color: #1C92EF !important; 
}

/* Safe Star Styling */
#pkludoContainer .pkludo-cell.safe-star::after {
  content: "☆";
  font-size: 20px;
  font-weight: 900;
  color: #444444;
  position: absolute;
  line-height: 1;
}

/* Track Arrows */
#pkludoContainer .pkludo-cell.arrow-cell::after {
  content: attr(data-arrow);
  font-size: 16px;
  font-weight: 900;
  position: absolute;
  line-height: 1;
}

#pkludoContainer .pkludo-cell.arrow-red::after { color: #E52521; }
#pkludoContainer .pkludo-cell.arrow-green::after { color: #008037; }
#pkludoContainer .pkludo-cell.arrow-yellow::after { color: #FFD700; }
#pkludoContainer .pkludo-cell.arrow-blue::after { color: #1C92EF; }

/* 3D Drop Pin Tokens */
#pkludoContainer .pkludo-token-pin {
  width: 22px;
  height: 28px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  filter: drop-shadow(0px 3px 2px rgba(0,0,0,0.5));
  transition: transform 0.15s ease-in-out, top 0.2s, left 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pin Head Pointer */
#pkludoContainer .pkludo-token-pin::before {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: inset 0 0 0 2px #555555;
}

/* Inner Color Badge */
#pkludoContainer .pkludo-token-pin::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #333333;
}

/* Base Shadow Ring */
#pkludoContainer .pkludo-token-pin-base {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid #666666;
  background: #333333;
  z-index: -1;
}

/* Color Badge Fill Colors */
#pkludoContainer .pkludo-token-pin.red-token::after { background: #E52521; }
#pkludoContainer .pkludo-token-pin.green-token::after { background: #008037; }
#pkludoContainer .pkludo-token-pin.yellow-token::after { background: #FFD700; }
#pkludoContainer .pkludo-token-pin.blue-token::after { background: #1C92EF; }

/* Bounce Animation for Movable Tokens */
#pkludoContainer .pkludo-token-pin.can-move {
  animation: pkludo-pin-bounce 0.5s infinite alternate ease-in-out;
  z-index: 20;
}

@keyframes pkludo-pin-bounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-7px) scale(1.15); }
}

/* Multi-Token Cell Stacking Layout */
#pkludoContainer .pkludo-cell .pkludo-token-pin:nth-child(1) { transform: translate(-3px, -4px) scale(0.8); }
#pkludoContainer .pkludo-cell .pkludo-token-pin:nth-child(2) { transform: translate(3px, -4px) scale(0.8); }
#pkludoContainer .pkludo-cell .pkludo-token-pin:nth-child(3) { transform: translate(-3px, 3px) scale(0.8); }
#pkludoContainer .pkludo-cell .pkludo-token-pin:nth-child(4) { transform: translate(3px, 3px) scale(0.8); }

/* Bottom Control Panel */
#pkludoContainer .pkludo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  width: 100%;
}

#pkludoContainer .pkludo-dice-box {
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  border-radius: 12px;
  border: 2px solid #2b79c2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.1s ease;
}

#pkludoContainer .pkludo-dice-box:active {
  transform: scale(0.95);
}

/* Clean, bold text display for rolled numbers */
#pkludoContainer .pkludo-dice {
  font-size: 28px;
  font-weight: 900;
  color: #1c5286;
  line-height: 1;
  text-align: center;
}

#pkludoContainer .pkludo-btn-primary {
  background: linear-gradient(180deg, #2b79c2 0%, #1c5286 100%);
  color: #FFFFFF;
  border: 1px solid #143d65;
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#pkludoContainer .pkludo-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

#pkludoContainer .pkludo-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

#pkludoContainer .pkludo-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c6f63cf *//* =========================================================
   SUPER PLATFORM ADVENTURE
   FULLY ISOLATED / ELEMENTOR SAFE
   ========================================================= */

.spa-game,
.spa-game *,
.spa-game *::before,
.spa-game *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN GAME CONTAINER
   ========================================================= */

.spa-game {
    --spa-bg: #111;

    width: 100%;
    max-width: 1100px;

    margin: 20px auto;
    padding: 0;

    position: relative;

    background: var(--spa-bg);
    color: #fff;

    border-radius: 12px;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    isolation: isolate;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.spa-game .spa-header {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 16px;

    background: #181818;

    border: 1px solid #333;
    border-bottom: 0;

    position: relative;
    z-index: 50;

    overflow: hidden;
}


.spa-game .spa-title {
    flex: 0 0 auto;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 1px;

    white-space: nowrap;
}


.spa-game .spa-hud {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 18px;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    min-width: 0;
}


.spa-game .spa-hud span {
    display: inline-block;
}


.spa-game .spa-hud b {
    color: #fff;

    margin-left: 3px;
}


/* =========================================================
   GAME SCREEN
   ========================================================= */

.spa-game .spa-screen {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #5bc8ff;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-action: none;
    touch-action: none;

    isolation: isolate;
}


.spa-game .spa-canvas {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: block;

    image-rendering: pixelated;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-action: none;
    touch-action: none;

    pointer-events: none;
}


/* =========================================================
   OVERLAYS
   ========================================================= */

.spa-game .spa-overlay {
    position: absolute;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 24px;

    background: rgba(0, 0, 0, .60);

    -webkit-user-select: none;
    user-select: none;
}


.spa-game .spa-hidden {
    display: none !important;
}


.spa-game .spa-overlay-box {
    width: min(90%, 700px);
}


.spa-game .spa-overlay h2 {
    margin: 0 0 12px;

    font-size: clamp(25px, 5vw, 52px);

    line-height: 1.1;

    font-weight: 900;

    text-shadow:
        4px 4px 0 #000;
}


.spa-game .spa-overlay p {
    margin: 7px 0;

    font-size: 15px;

    color: #eee;

    line-height: 1.5;
}


.spa-game .spa-overlay button {
    appearance: none;

    border: 0;

    margin-top: 18px;

    min-width: 150px;

    padding: 13px 26px;

    border-radius: 9px;

    background: #fff;

    color: #111;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    touch-action: manipulation;

    -webkit-user-select: none;
    user-select: none;
}


.spa-game .spa-overlay button:active {
    transform: translateY(2px);
}


/* =========================================================
   CONTROLS
   IMPORTANT:
   THESE ARE INSIDE .spa-game ONLY.
   THEY APPEAR ON ALL DEVICES.
   ========================================================= */

.spa-game .spa-mobile-controls {
    width: 100%;

    min-height: 94px;

    padding:
        11px
        15px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    background: #151515;

    border-top: 1px solid #303030;

    position: relative;

    z-index: 200;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-action: none;
    touch-action: none;
}


.spa-game .spa-direction-controls {
    display: flex;

    align-items: center;

    gap: 10px;

    flex: 0 0 auto;
}


.spa-game .spa-control {
    appearance: none;

    width: 64px;
    height: 64px;

    padding: 0;

    margin: 0;

    border:
        1px solid
        #494949;

    border-radius: 15px;

    background: #292929;

    color: #fff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 23px;
    font-weight: 900;

    line-height: 1;

    box-shadow:
        0 4px 0 #080808;

    cursor: pointer;

    outline: none;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

    -webkit-tap-highlight-color:
        transparent;

    touch-action: none;
}


.spa-game .spa-control:active,
.spa-game .spa-control.spa-pressed {
    transform: translateY(3px);

    box-shadow:
        0 1px 0 #080808;

    background: #444;
}


.spa-game .spa-jump {
    width: 72px;
    height: 72px;

    border-radius: 50%;

    flex: 0 0 auto;
}


/* =========================================================
   HELP
   ========================================================= */

.spa-game .spa-help {
    width: 100%;

    padding: 9px;

    background: #181818;

    color: #888;

    text-align: center;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .spa-game {
        max-width: 100%;

        margin:
            12px
            auto;

        border-radius: 10px;
    }


    .spa-game .spa-header {
        min-height: 48px;

        padding:
            0
            12px;
    }


    .spa-game .spa-hud {
        gap: 13px;

        font-size: 11px;
    }


    .spa-game .spa-mobile-controls {
        min-height: 104px;

        padding:
            13px
            18px;
    }


    .spa-game .spa-control {
        width: 70px;
        height: 70px;

        font-size: 25px;
    }


    .spa-game .spa-jump {
        width: 78px;
        height: 78px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .spa-game {
        width: 100%;

        max-width: none;

        margin:
            0
            auto;

        border-radius: 0;
    }


    .spa-game .spa-header {
        height: 44px;
        min-height: 44px;

        padding:
            0
            8px;

        border-radius: 0;
    }


    .spa-game .spa-title {
        display: none;
    }


    .spa-game .spa-hud {
        width: 100%;

        justify-content: space-around;

        gap: 4px;

        font-size: 10px;
    }


    .spa-game .spa-screen {
        width: 100%;

        aspect-ratio: 16 / 9;

        max-height: none;
    }


    /*
       Controls remain BELOW the canvas.
    */

    .spa-game .spa-mobile-controls {
        display: flex;

        min-height: 104px;

        padding:
            13px
            14px;
    }


    .spa-game .spa-direction-controls {
        gap: 9px;
    }


    .spa-game .spa-control {
        width: 68px;
        height: 68px;

        border-radius: 16px;

        font-size: 25px;
    }


    .spa-game .spa-jump {
        width: 76px;
        height: 76px;
    }


    .spa-game .spa-help {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .spa-game .spa-header {
        height: 42px;
        min-height: 42px;
    }


    .spa-game .spa-hud {
        font-size: 9px;
    }


    .spa-game .spa-mobile-controls {
        min-height: 98px;

        padding:
            11px
            10px;
    }


    .spa-game .spa-control {
        width: 61px;
        height: 61px;

        font-size: 22px;
    }


    .spa-game .spa-jump {
        width: 69px;
        height: 69px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 330px) {

    .spa-game .spa-control {
        width: 55px;
        height: 55px;

        font-size: 20px;
    }


    .spa-game .spa-jump {
        width: 62px;
        height: 62px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9073bfa *//* =====================================================
   FLAPPY BIRD - CSS
===================================================== */

#flappy-game {
    width: 100%;
    max-width: 430px;
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/* Header */
.flappy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.flappy-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.score-box {
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    font-weight: 700;
}

/* Game Screen */
#game-screen {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, #6fd8ff, #92e8ff, #dffbff);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    touch-action: none; /* Prevents scroll on swipe */
}

/* Sky Clouds */
#sky::before,
#sky::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    filter: blur(8px);
}

#sky::before {
    width: 160px;
    height: 50px;
    left: 30px;
    top: 60px;
}

#sky::after {
    width: 120px;
    height: 40px;
    right: 30px;
    top: 130px;
}

/* Bird */
#bird {
    position: absolute;
    left: 60px;
    top: 45%;
    width: 48px;
    height: 48px;
    z-index: 20;
    will-change: transform, top;
}

#bird img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Pipes */
#pipes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pipe {
    position: absolute;
    left: 0;
    width: 65px;
    background: linear-gradient(90deg, #37dc55, #14a833);
    border-radius: 10px;
    box-shadow: inset 4px 0 8px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0,0,0,0.15);
}

/* Ground */
#ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    background: linear-gradient(180deg, #6d4d2f, #4b2f17);
    z-index: 10;
}

/* Overlays */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    z-index: 100;
}

#game-over {
    display: none;
}

.overlay h2 {
    margin: 0;
    font-size: 32px;
}

.overlay p {
    margin: 0;
    font-size: 16px;
}

.overlay button {
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: #fff;
    color: #111;
    transition: transform 0.2s ease;
}

.overlay button:active {
    transform: scale(0.95);
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    #game-screen {
        height: 70vh;
        max-height: 580px;
        min-height: 450px;
    }

    #bird {
        left: 40px;
        width: 42px;
        height: 42px;
    }
}/* End custom CSS */