@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .sticky-top {
    @apply sticky top-0 z-50;
  }
  .fix-mobile-size {
    @apply max-w-[540px] self-center relative overflow-visible bg-light-blue;
  }

  .box-input {
    @apply bg-transparent pl-2 w-full border-b rounded-none border-dark-blue-button-500 focus:outline-none;
  }
  .vertical-line {
    width: 1px;
    height: 16px;
    background-color: #e3e5e8;
  }
  .styled-tab-verif {
    @apply max-w-[72px] p-0 h-14;
  }
  .styled-button {
    @apply bg-dark-blue-button-500 border-none text-white rounded text-xs;
    min-height: 10px;
    height: 25px;
    padding: 0 10px;
  }
  .btn.btn-disabled,
  .btn[disabled],
  .btn:disabled {
    @apply text-white;
  }
  .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not(
      [disabled]
    ),
  .tab:is(input:checked) {
    @apply border-b-dark-blue-button-500;
  }
  .styled-button:hover {
    @apply bg-dark-blue-button-700;
  }

  .styled-checkbox {
    @apply border-text-blue-500 w-4 h-4;
  }
  .styled-card-body {
    @apply overflow-auto;
    max-height: 50vh;
  }

  .input-error {
    border-color: red;
  }

  #navbar {
    @apply bottom-0 fixed left-0 right-0 pointer-events-none px-0 z-50;
  }
  .styled-nav-mobile {
    @apply bg-super-white-500 pointer-events-auto border-t-2 border-white items-end sm:items-stretch justify-around;
    box-shadow: 0px -3px 12px 0px #b8b8b840;
  }
  .styled-nav-mobile a {
    @apply flex-1 w-1/5 text-center my-1 no-underline px-1 sm:px-2;
  }
  .loading-spinner {
    @apply text-dark-blue-button-500;
  }
  .preload-rsp {
    @apply bg-[url(/images/rsp/rock-scissor-paper-bg.png)] bg-cover bg-center bg-no-repeat;
  }
  .preload-luckyegg {
    @apply bg-[url(/images/lucky-egg/scsht-lucky-egg-en-1.jpg)] bg-cover bg-center bg-no-repeat;
  }
  .icon-box {
    @apply min-h-7;
  }
  .icon-box .inner-icon {
    @apply h-auto pb-1 w-6 sm:w-7;
  }
  .center-bottom-big-button {
    @apply w-14 sm:w-16 lg:w-20 mx-3;
  }
  .center-bottom-big-button button {
    @apply bg-[url(/images/w-bottom-btn-bg.gif)] bg-contain rounded-full p-0 text-sm absolute top-0 left-0 w-full h-full bg-center bg-no-repeat;
  }
  .center-bottom-big-button button:after {
    @apply bg-[url(/images/WB-W-icon.svg)] block bg-contain bg-center bg-no-repeat mx-auto;
    content: "";
    width: 43%;
    height: 60%;
  }
  .footer-btm-btn-doll {
    @apply absolute -bottom-1 -right-1 w-7;
  }
  .mini-pop-out-modal {
    @apply fixed top-0 left-0 bottom-0 right-0 z-10;
  }
  .mini-pop-out-modal.show {
    @apply block;
  }
  .overlay-footer {
    @apply absolute top-0 bottom-0 left-0 right-0 bg-opacity-black opacity-0;
    backdrop-filter: blur(10px);
  }
  .overlay-footer.show {
    @apply opacity-100;
  }
  .popout-footer {
    @apply absolute left-1/2 bottom-9 mb-14;
    transform: translate(-50%);
  }
  .popout-footer a {
    @apply bottom-0;
    transform: translate(-50%);
  }
  .popout-footer a:nth-child(1) {
    @apply bottom-0 -right-4;
  }
  .popout-footer a:nth-child(2) {
    @apply bottom-0 left-14;
  }
  .inner-btn {
    @apply text-white bg-custom=black p-3 gap-1 h-16 w-16;
  }

  .head-card {
    @apply relative overflow-hidden;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
  }
  .head-card::before {
    @apply absolute -top-5 bottom-1/2 left-0 right-0;
    content: "";
    background-image: linear-gradient(0deg, #00000000 0%, #000 100%);
  }

  .glass-card {
    @apply rounded-3xl -mt-8 pt-8;
    background-color: #fbfbfb03;
    backdrop-filter: blur(24px);
  }
  .custom-button-rsp-game {
    @apply bg-[url(/images/rsp/rock-scissor-paper-battle-btn-bg.png)] bg-contain bg-center bg-no-repeat bg-transparent shadow-lg rounded-2xl w-44;
  }

  .center-div {
    @apply absolute top-2/4 left-2/4;
    transform: translate(-50%, -50%);
  }

  .player-rsp-bg {
    @apply bg-[url(/images/rsp/rsp-select-bg.png)] bg-contain bg-center bg-no-repeat bg-transparent;
  }
  .bg-option-rsp {
    @apply bg-[url(/images/rsp/rock-scissor-paper-btn.png)] bg-contain bg-center bg-no-repeat bg-transparent;
  }
  .desc-card {
    @apply py-2 px-3;
    box-shadow: 0 4px 20px 1px #99b6ff80;
  }

  .mySwiper-promotion .swiper-slide {
    max-width: 90%;
  }
  .mySwiper-promotion .swiper-slide:last-child {
    width: 40% !important;
  }

  .mySwiper-rsp {
    overflow: unset !important;
  }
  .mySwiper-rsp .swiper-slide {
    @apply flex justify-center;
  }
  .mySwiper-rsp .swiper-button-next,
  .mySwiper-rsp .swiper-button-prev {
    @apply rounded-full border-2;
  }
  .mySwiper-rsp .swiper-button-next {
    right: -65px !important;
  }
  .mySwiper-rsp .swiper-button-prev {
    left: -65px !important;
  }
  .mySwiper-rsp .swiper-button-next .swiper-navigation-icon,
  .mySwiper-rsp .swiper-button-prev .swiper-navigation-icon {
    @apply w-4 h-4 rounded-r-xl;
  }
  .device-mobile::after {
    content: "";
    background-image: url(/images/rsp/device-mobile.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
    position: absolute;
    top: -4%;
    left: -10%;
    width: 120%;
    height: 108%;
  }
  .play-btn {
    @apply flex justify-center text-center mt-7 sticky bottom-8 cursor-none z-50;
  }
  .play-btn a {
    @apply rounded-full bg-dark-blue-button-500 px-5 py-3 text-white font-bold no-underline;
  }
  .game-card .ratio {
    --bs-aspect-ratio: 129%;
  }
  .slide-card {
    @apply bg-dark-blue-button-300 absolute top-0 left-0 w-full h-full rounded-lg;
  }

  /* .styled-nav-mobile a.isActive .inner-icon,
  .styled-nav-mobile a.isActive p {
    @apply text-blue-bg-head fill-blue-bg-head;
  }
  .styled-nav-mobile .inner-icon,
  .styled-nav-mobile a p {
    @apply fill-gray-300 text-gray-300;
  } */

  .styled-list {
    @apply bg-white rounded-tr-lg rounded-tl-lg;
  }

  .styled-list-item:not(:first-child)::before {
    @apply bg-blue-bg-head top-0 left-4 right-4 absolute;
    content: "";
    opacity: 0.2;
    height: 1px;
  }
  .list-title {
    @apply mt-5 mb-3 ml-2 opacity-50 font-bold;
  }
  .hr {
    @apply bg-blue-bg-head my-5 opacity-20;
    height: 1px;
  }
  .username::after {
    @apply bg-[url(/images/pencil-blue-icon.svg)] bg-contain bg-center bg-no-repeat absolute w-4 h-4;
    content: "";
  }
  .mySwiperHomepage {
    width: 100%; /* Or a specific pixel value */
  }
  .mySwiperHomepage .swiper-slide {
    text-align: center;
    width: 80%;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .mySwiperHomepage .swiper-slide-active {
    transform: scale(1.2) !important;
  }

  .styled-image {
    @apply object-cover;
  }
  .mySwiperHomepage .swiper-pagination .swiper-pagination-bullet {
    @apply w-1 h-1;
  }

  .home-banner {
    background: linear-gradient(0deg, #f3faff 43%, #00a0f0 0%);
    overflow: hidden;
  }

  ol,
  ul,
  menu {
    list-style: auto;
    margin: auto;
    padding: 0 24px;
  }

  .app-title {
    @apply text-[16px] sm:text-lg md:text-2xl font-bold;
  }
}

.preload-languages {
  @apply bg-black bg-opacity-50;
}

html,
body {
  @apply bg-dark-blue-button-500 text-default-text-color-500 font-sans font-medium tracking-wide;
}
p {
  @apply text-default-text-color-500 font-medium mb-0 text-xs;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: black !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
input,
input::placeholder {
  @apply text-xs;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: red;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  @apply bg-dark-blue-button-500;
  border: 2px solid red;
}

::-webkit-scrollbar-thumb:vertical {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-dark-blue-button-500;
}

* {
  scrollbar-color: red;
}

*:hover {
  scrollbar-color: color-mix(in oklch, rgb(21 213 254) 60%, transparent)
    transparent;
}
.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}
.ratio:before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}

a {
  @apply text-blue-500 underline;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}
.animate-slide-down {
  animation: slideDown 0.4s ease-out;
}

/* ===== Shake animation for default state ===== */
/* Natural Shake Animation with Random Variation */
@keyframes natural-shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-8px, -2px) rotate(-2deg);
  }
  40% {
    transform: translate(8px, 2px) rotate(2deg);
  }
  60% {
    transform: translate(-6px, -1px) rotate(-1deg);
  }
  80% {
    transform: translate(6px, 1px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.animate-natural-shake {
  animation: natural-shake 0.8s ease-in-out infinite;
}
.animate-natural-shake-none {
  animation: none; /* Stops shaking during crack */
}

/* Hammer Smash Animation - Adjusted starting position */
@keyframes hammer-smash {
  0% {
    transform: translate(-50%, -200%) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) rotate(-20deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0) rotate(0deg);
    opacity: 0;
  }
}
.animate-hammer-smash {
  animation: hammer-smash 0.7s forwards;
}

/* Slow Crack Animation */
@keyframes slow-crack {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-slow-crack {
  animation: slow-crack 1s forwards;
}

/* Zooom in/out Animation */
@keyframes zoomInOut {
  0%,
  100% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(1.1); /* Zoom in */
  }
}
/* Zooom in/out Animation */
.zoom-animation {
  display: inline-block;
  animation: zoomInOut 1s ease-in-out infinite;
}