@import url('../global.css');

:root {
  --title-color: var(--color-gemfall);
  --gemfall-cave-1: #34224f;
  --gemfall-cave-2: #171128;
  --gemfall-cave-3: #090812;
  --gemfall-wall-1: #49344e;
  --gemfall-wall-2: #35283e;
  --gemfall-wall-3: #443047;
  --gemfall-wall-4: #17131e;
  --gemfall-wall-5: #39273c;
  --gemfall-wall-6: #15111d;
  --gemfall-support-1: #3d211d;
  --gemfall-support-2: #81503a;
  --gemfall-support-3: #3a211d;
  --gemfall-floor-1: #352833;
  --gemfall-floor-2: #15131b;
}

.gemfall-board[data-visual-theme='arcade'] {
  --gemfall-cave-1: #5a2a72;
  --gemfall-cave-2: #241030;
  --gemfall-cave-3: #0d0616;
  --gemfall-wall-1: #6a3a72;
  --gemfall-wall-2: #4a2a52;
  --gemfall-wall-3: #5a3a62;
  --gemfall-wall-4: #1e1024;
  --gemfall-wall-5: #4a2a52;
  --gemfall-wall-6: #180c1e;
  --gemfall-support-1: #4a1e3a;
  --gemfall-support-2: #a8508a;
  --gemfall-support-3: #3a1830;
  --gemfall-floor-1: #3a2038;
  --gemfall-floor-2: #180c1c;
}

.gemfall-board[data-visual-theme='midnight'] {
  --gemfall-cave-1: #22355a;
  --gemfall-cave-2: #121c30;
  --gemfall-cave-3: #080c16;
  --gemfall-wall-1: #2a3a52;
  --gemfall-wall-2: #1e2a3e;
  --gemfall-wall-3: #263248;
  --gemfall-wall-4: #10141e;
  --gemfall-wall-5: #1e2a3e;
  --gemfall-wall-6: #0c0f18;
  --gemfall-support-1: #1e2a3a;
  --gemfall-support-2: #3a5a78;
  --gemfall-support-3: #141c28;
  --gemfall-floor-1: #1e2430;
  --gemfall-floor-2: #0c0e16;
}

.gemfall-board[data-visual-theme='daylight'] {
  --gemfall-cave-1: #6a52a0;
  --gemfall-cave-2: #3a2a58;
  --gemfall-cave-3: #201830;
  --gemfall-wall-1: #6a54a0;
  --gemfall-wall-2: #4a3a78;
  --gemfall-wall-3: #5a4a8a;
  --gemfall-wall-4: #241a38;
  --gemfall-wall-5: #4a3a78;
  --gemfall-wall-6: #180c2c;
  --gemfall-support-1: #4a3068;
  --gemfall-support-2: #a890e0;
  --gemfall-support-3: #2e2050;
  --gemfall-floor-1: #382a4a;
  --gemfall-floor-2: #1c1428;
}

.gemfall-board[data-visual-theme='amber'] {
  --gemfall-cave-1: #7a4a1f;
  --gemfall-cave-2: #3a2410;
  --gemfall-cave-3: #180e08;
  --gemfall-wall-1: #7a5228;
  --gemfall-wall-2: #5a3a1c;
  --gemfall-wall-3: #6a4622;
  --gemfall-wall-4: #2a1a0c;
  --gemfall-wall-5: #5a3a1c;
  --gemfall-wall-6: #1e1408;
  --gemfall-support-1: #5c3a1a;
  --gemfall-support-2: #d99a4a;
  --gemfall-support-3: #3a2410;
  --gemfall-floor-1: #3a2c18;
  --gemfall-floor-2: #1c130a;
}

.gemfall-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: #110d22;
  border: 1px solid color-mix(in srgb, var(--color-gemfall) 42%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 4rem rgb(4 2 12 / 75%),
    var(--game-board-shadow);
}

.gemfall-cave {
  position: relative;
  touch-action: none;
  background: radial-gradient(
    ellipse at 50% 36%,
    var(--gemfall-cave-1) 0,
    var(--gemfall-cave-2) 58%,
    var(--gemfall-cave-3) 100%
  );
}

.gemfall-depth,
.gemfall-supports,
.gemfall-walls,
.gemfall-floor,
.gemfall-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gemfall-depth__shaft {
  position: absolute;
  inset: 0 17%;
  background:
    repeating-linear-gradient(90deg, transparent 0 19%, rgb(148 102 177 / 7%) 19.2% 19.6%),
    linear-gradient(180deg, rgb(89 44 105 / 14%), transparent 55%);
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
}
.gemfall-depth__glow {
  position: absolute;
  top: -10%;
  left: 30%;
  width: 40%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(228 79 167 / 18%), transparent 68%);
  filter: blur(1.2rem);
}

.gemfall-support {
  position: absolute;
  z-index: 3;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 22%,
      rgb(255 214 151 / 12%) 23% 30%,
      transparent 31% 55%
    ),
    linear-gradient(
      90deg,
      var(--gemfall-support-1),
      var(--gemfall-support-2) 45%,
      var(--gemfall-support-3)
    );
  border: 1px solid #2a1718;
  box-shadow: 0 0.4rem 0.6rem rgb(4 2 9 / 55%);
}
.gemfall-support--left {
  top: 0;
  bottom: 0;
  left: 7%;
  width: 4.5%;
  transform: rotate(-1.5deg);
}
.gemfall-support--right {
  top: 0;
  right: 7%;
  bottom: 0;
  width: 4.5%;
  transform: rotate(1.5deg);
}
.gemfall-support--top {
  top: 5%;
  right: 5%;
  left: 5%;
  height: 4.5%;
  transform: none;
}

.gemfall-wall {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 18%;
  background:
    radial-gradient(circle at 35% 13%, var(--gemfall-wall-1) 0 9%, transparent 10%),
    radial-gradient(circle at 72% 39%, var(--gemfall-wall-2) 0 12%, transparent 13%),
    radial-gradient(circle at 23% 71%, var(--gemfall-wall-3) 0 15%, transparent 16%),
    linear-gradient(90deg, var(--gemfall-wall-4), var(--gemfall-wall-5) 55%, var(--gemfall-wall-6));
  filter: drop-shadow(0 0 0.8rem #08060d);
}
.gemfall-wall--left {
  left: -3%;
  clip-path: polygon(0 0, 84% 0, 100% 13%, 82% 28%, 98% 46%, 78% 64%, 92% 82%, 72% 100%, 0 100%);
}
.gemfall-wall--right {
  right: -3%;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 28% 100%, 8% 82%, 22% 64%, 2% 46%, 18% 28%, 0 13%);
}

.gemfall-crystals {
  position: absolute;
  z-index: 3;
  width: 12%;
  height: 25%;
  background:
    linear-gradient(72deg, transparent 0 25%, #ec72c1 26% 48%, transparent 49%) 0 100% / 42% 85%
      no-repeat,
    linear-gradient(105deg, transparent 0 23%, #8b63d8 24% 55%, transparent 56%) 40% 100% / 43% 100%
      no-repeat,
    linear-gradient(74deg, transparent 0 28%, #5fd5dc 29% 52%, transparent 53%) 100% 100% / 42% 72%
      no-repeat;
  filter: drop-shadow(0 0 0.55rem rgb(221 73 174 / 48%));
  opacity: 0.72;
}
.gemfall-crystals--left {
  bottom: 8%;
  left: 3%;
}
.gemfall-crystals--right {
  top: 20%;
  right: 2%;
  transform: scaleX(-1) rotate(-8deg);
}

.gemfall-floor {
  z-index: 3;
  top: 88%;
  background: linear-gradient(180deg, var(--gemfall-floor-1), var(--gemfall-floor-2) 58%);
  border-top: 0.22rem solid #615061;
}
.gemfall-floor::before {
  position: absolute;
  inset: 17% 0 auto;
  height: 16%;
  background: repeating-linear-gradient(90deg, #765236 0 4%, transparent 4% 9%);
  content: '';
}
.gemfall-rail {
  position: absolute;
  top: 7%;
  bottom: 0;
  width: 0.22rem;
  background: linear-gradient(90deg, #5d6570, #bcc0c4, #424a54);
  box-shadow: 0 0 0.35rem #08070a;
}
.gemfall-rail--left {
  left: 39%;
  transform: rotate(2deg);
}
.gemfall-rail--right {
  right: 39%;
  transform: rotate(-2deg);
}

.gemfall-basket,
.gemfall-item {
  position: absolute;
}

.gemfall-basket {
  z-index: 6;
  height: 9%;
  transition: left 80ms linear;
  filter: drop-shadow(0 0.55rem 0.35rem rgb(3 2 8 / 65%));
}
.gemfall-basket__body {
  position: absolute;
  inset: 19% 4% 19%;
  border: 0.18rem solid #be718e;
  border-top: 0;
  border-radius: 0 0 28% 28%;
  background:
    repeating-linear-gradient(90deg, transparent 0 12%, rgb(247 172 195 / 18%) 13% 17%),
    linear-gradient(180deg, #713853, #3c253a);
  box-shadow: inset 0 -0.3rem 0.4rem rgb(15 9 20 / 45%);
}
.gemfall-basket__rim {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 0;
  left: 0;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4a2c8, #914c72);
  box-shadow: 0 0 0.65rem rgb(234 85 169 / 48%);
}
.gemfall-basket__wheel {
  position: absolute;
  bottom: 3%;
  width: 13%;
  aspect-ratio: 1;
  border: 0.14rem solid #191522;
  border-radius: 50%;
  background: #71727b;
}
.gemfall-basket__wheel--left {
  left: 18%;
}
.gemfall-basket__wheel--right {
  right: 18%;
}
.gemfall-basket--charged {
  animation: gemfall-basket-charge 460ms cubic-bezier(0.18, 0.86, 0.32, 1);
}

.gemfall-item {
  z-index: 5;
  transform: rotate(45deg);
  filter: drop-shadow(0 0.25rem 0.22rem rgb(3 2 8 / 50%));
}
.gemfall-item__core,
.gemfall-item__facet {
  position: absolute;
  inset: 0;
}

.gemfall-item--gem .gemfall-item__core {
  background: linear-gradient(135deg, #f8aada, var(--color-gemfall) 52%, #74206c);
  clip-path: polygon(50% 0, 94% 29%, 78% 84%, 50% 100%, 17% 82%, 5% 29%);
  box-shadow: inset 0.15rem 0.15rem rgb(255 255 255 / 38%);
}
.gemfall-item--gem .gemfall-item__facet {
  inset: 20% 22% 26%;
  background: linear-gradient(135deg, rgb(255 255 255 / 62%), transparent 58%);
  clip-path: polygon(50% 0, 100% 100%, 0 72%);
}

.gemfall-item--rare .gemfall-item__core {
  border: 0.12rem solid #fff6ad;
  background: conic-gradient(from 35deg, #72e6ef, #9368e8, #ff719d, #fff08c, #72e6ef);
  clip-path: polygon(50% 0, 88% 20%, 100% 62%, 67% 100%, 23% 90%, 0 48%, 18% 13%);
  box-shadow: 0 0 1.2rem #fff08c;
  animation: gemfall-rare-spin 720ms linear infinite;
}
.gemfall-item--rare .gemfall-item__facet {
  inset: 24%;
  border-radius: 50%;
  background: #fff9c7;
  box-shadow: 0 0 0.6rem #fff;
}

.gemfall-item--bomb {
  transform: none;
}
.gemfall-item--bomb .gemfall-item__core {
  inset: 8%;
  border: 0.13rem solid #180e16;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 27%, #e79581, #a6313d 34%, #361923 72%);
  box-shadow: inset -0.18rem -0.18rem 0.25rem rgb(0 0 0 / 45%);
}
.gemfall-item--bomb .gemfall-item__core::after {
  position: absolute;
  top: -35%;
  right: 10%;
  width: 24%;
  height: 40%;
  border-radius: 100% 0 0;
  background: #ffc34a;
  box-shadow: 0 0 0.42rem #ff8b3d;
  content: '';
  transform: rotate(38deg);
}
.gemfall-item--bomb .gemfall-item__facet {
  inset: 23% 53% 55% 20%;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
}

.gemfall-status {
  position: absolute;
  z-index: 8;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.gemfall-combo-meter {
  display: grid;
  grid-template-columns: auto minmax(5rem, 10rem);
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgb(226 86 169 / 62%);
  border-radius: var(--border-radius-xl);
  background: rgb(17 11 30 / 82%);
  box-shadow: 0 0 1.25rem rgb(214 65 159 / 22%);
}
.gemfall-combo-meter__label {
  color: #fff08c;
  font-weight: var(--font-weight-bolder);
}
.gemfall-combo-meter__fill {
  height: 0.38rem;
  border-radius: inherit;
  background: linear-gradient(90deg, #f7ca4f, #fff5a8);
  box-shadow: 0 0 0.5rem #fef08a;
}

.gemfall-danger {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 0.14rem solid #ff9271;
  border-radius: 50%;
  color: white;
  font-weight: var(--font-weight-bolder);
  background: #b53648;
  box-shadow: 0 0 1.2rem #da3a51;
  opacity: 0;
  transform: scale(0.7);
}
.gemfall-danger--visible {
  opacity: 1;
  transform: scale(1);
  animation: gemfall-danger-pulse 680ms ease-in-out infinite;
}

.gemfall-catch-effect {
  position: absolute;
  z-index: 9;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gemfall-catch-effect__ring {
  position: absolute;
  width: 3.8rem;
  height: 3.8rem;
  border: 0.14rem solid #f5a5d2;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.28);
  animation: gemfall-catch-ring 460ms ease-out both;
}
.gemfall-catch-effect__shard {
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 20% 5%;
  background: #f69bd0;
  box-shadow: 0 0 0.45rem var(--color-gemfall);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: gemfall-catch-shard 460ms ease-out both;
  animation-delay: calc(var(--gemfall-shard-index, 0) * -28ms);
}
.gemfall-catch-effect strong {
  position: absolute;
  min-width: 2.5rem;
  color: #ffc5e6;
  font-size: clamp(1.45rem, 4vw, 2.35rem);
  font-weight: var(--font-weight-bolder);
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 0.35rem #100a1d,
    0 0 0.9rem var(--color-gemfall);
  transform: translate(-50%, -115%);
  animation: gemfall-combo 620ms cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.gemfall-cave--catch {
  animation: gemfall-catch 280ms ease-out;
}
.gemfall-cave--hit {
  animation: gemfall-hit 280ms ease-out;
}

@keyframes gemfall-catch {
  50% {
    box-shadow: inset 0 0 0 0.3rem rgb(230 82 173 / 40%);
  }
}
@keyframes gemfall-basket-charge {
  40% {
    filter: brightness(1.55);
    transform: scale(1.12, 0.82);
  }
  70% {
    transform: scale(0.95, 1.06);
  }
}
@keyframes gemfall-catch-ring {
  20% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}
@keyframes gemfall-catch-shard {
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--gemfall-shard-x, 0rem)),
        calc(-50% + var(--gemfall-shard-y, 0rem))
      )
      rotate(145deg) scale(0.35);
  }
}
@keyframes gemfall-combo {
  0% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.45);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -190%) scale(0.9);
  }
}
@keyframes gemfall-hit {
  25%,
  75% {
    transform: translateX(-0.25rem);
  }
  50% {
    transform: translateX(0.25rem);
  }
}
@keyframes gemfall-rare-spin {
  to {
    transform: rotate(360deg) scale(1.08);
  }
}
@keyframes gemfall-danger-pulse {
  50% {
    transform: scale(1.16);
    filter: brightness(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gemfall-cave--catch,
  .gemfall-cave--hit,
  .gemfall-basket--charged,
  .gemfall-catch-effect__ring,
  .gemfall-catch-effect__shard,
  .gemfall-catch-effect strong,
  .gemfall-item--rare .gemfall-item__core,
  .gemfall-danger--visible {
    animation: none;
  }
}