/* Final costume-palette layer. Loaded last so the current gameplay modules keep
   their behavior while sharing one stable visual system. */

:root {
  --premium-bg: #06090a;
  --premium-bg-soft: #0b1011;
  --premium-surface: rgba(13, 17, 18, .95);
  --premium-surface-2: rgba(20, 22, 24, .97);
  --premium-line: rgba(226, 184, 76, .2);
  --premium-line-strong: rgba(226, 58, 43, .38);
  --premium-gold: #dfb84e;
  --premium-gold-bright: #f4d069;
  --premium-text: #f5f0e6;
  --premium-muted: #969b98;
  --premium-danger: #e43b2f;
  --costume-red: #de2f26;
  --costume-acid: #c9e846;
  --costume-forest: #152d27;
  --costume-purple: #643596;
}

body {
  background:
    radial-gradient(circle at 50% -12%, rgba(201, 232, 70, .09), transparent 29%),
    radial-gradient(circle at 92% 20%, rgba(222, 47, 38, .09), transparent 28%),
    linear-gradient(180deg, #070b0c 0%, #08090d 56%, #040606 100%) !important;
}

.world { opacity: .84 !important; }
.world__veil {
  background:
    linear-gradient(180deg, rgba(4, 8, 8, .12), rgba(4, 5, 7, .68)),
    radial-gradient(circle at 50% 20%, transparent 0 38%, rgba(2, 4, 5, .62) 82%) !important;
}
.world__moon { opacity: .28 !important; filter: saturate(.72) hue-rotate(-8deg) !important; }
.petals { display: none !important; }

.tap-button__arara,
.tap-button__hannya,
.tap-comic-word,
.tap-impact-flash,
.tap-impact-ring,
.tap-burst-particle { display: none !important; }

.tap-zone {
  overflow: hidden !important;
  border: 1px solid rgba(226, 58, 43, .28) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(222, 47, 38, .16), transparent 34%),
    radial-gradient(circle at 14% 16%, rgba(201, 232, 70, .075), transparent 24%),
    radial-gradient(circle at 86% 72%, rgba(100, 53, 150, .14), transparent 31%),
    linear-gradient(180deg, rgba(18, 19, 19, .985), rgba(6, 8, 9, .995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 208, 105, .08),
    inset 0 -28px 60px rgba(0, 0, 0, .26),
    0 20px 45px rgba(0, 0, 0, .32) !important;
}
.tap-zone::before {
  opacity: 1 !important;
  background:
    linear-gradient(118deg, rgba(201, 232, 70, .035), transparent 26%, transparent 72%, rgba(222, 47, 38, .055)),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(244, 208, 105, .012) 18px 19px) !important;
}
.score-lockup span {
  color: #b6b8ae !important;
  letter-spacing: .2em !important;
}
.score-lockup strong {
  color: transparent !important;
  background: linear-gradient(96deg, #f1ede2 5%, var(--premium-gold-bright) 48%, var(--costume-acid) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .42));
  text-shadow: none !important;
}

/* One square coordinate space keeps the portrait, ring, pedestal and hit wave
   centered together at every viewport size. */
.tap-orbit {
  width: min(100%, 344px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  flex: 0 0 auto !important;
  margin: -3px auto -5px !important;
  contain: layout paint !important;
  overflow: visible !important;
}
.tap-orbit__ring {
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .9 !important;
  filter: saturate(1.08) contrast(1.08) brightness(.94) drop-shadow(0 16px 24px rgba(0, 0, 0, .5)) !important;
  transform-origin: 50% 50% !important;
}
.tap-button {
  z-index: 3 !important;
  inset: 8% auto auto 11% !important;
  width: 78% !important;
  height: 78% !important;
  aspect-ratio: 1 !important;
}
.tap-button__character {
  width: auto !important;
  height: 114% !important;
  max-width: none !important;
  left: 50% !important;
  right: auto !important;
  bottom: -1% !important;
  translate: -50% 0 !important;
  transform-origin: 50% 76% !important;
  object-position: 50% 100% !important;
}
.tap-orbit__pedestal {
  z-index: 4 !important;
  width: 94% !important;
  max-width: none !important;
  left: 3% !important;
  right: auto !important;
  bottom: -1% !important;
  opacity: .92 !important;
  filter: saturate(.94) contrast(1.06) drop-shadow(0 16px 18px rgba(0, 0, 0, .56)) !important;
}
.tap-button__shockwave {
  position: absolute !important;
  z-index: 5 !important;
  inset: -3% !important;
  width: 106% !important;
  max-width: none !important;
  height: 106% !important;
  object-fit: contain !important;
  opacity: 0;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
}

.tap-button.has-arara-pose-pair .tap-button__character {
  visibility: visible !important;
  transform: none !important;
  transition: filter .32s ease !important;
}
.tap-button.has-arara-pose-pair .tap-button__character--idle {
  opacity: 1 !important;
  visibility: visible !important;
}
.tap-button.has-arara-pose-pair .tap-button__character--tap {
  opacity: 0 !important;
  visibility: hidden !important;
}
.tap-button.has-arara-pose-pair.is-tapping .tap-button__character--idle {
  opacity: 1 !important;
  visibility: visible !important;
}
.tap-button.has-arara-pose-pair.is-tapping .tap-button__character--tap {
  opacity: 1 !important;
  visibility: visible !important;
}
.tap-button.has-arara-pose-pair.is-tapping.is-mouth-closed .tap-button__character--idle {
  opacity: 1 !important;
}
.tap-button.has-arara-pose-pair.is-tapping.is-mouth-closed .tap-button__character--tap {
  opacity: 0 !important;
  visibility: hidden !important;
}

.tap-button:active,
.tap-button.is-tapping {
  transform: none !important;
  filter: none !important;
  transition: transform .2s cubic-bezier(.18, .76, .3, 1) !important;
}
.tap-button__aura { animation: aura 6.4s ease-in-out infinite !important; }
.tap-button__shine { animation: tap-shine 9.5s ease-in-out infinite !important; }
.tap-orbit:has(.tap-button.is-tapping) .tap-orbit__ring {
  animation: arara-ring-hit .9s cubic-bezier(.16, .78, .2, 1) both !important;
}
@keyframes arara-ring-hit {
  0% { transform: scale(.985); }
  24% { transform: scale(1.025); filter: saturate(1.22) brightness(1.1) drop-shadow(0 0 20px rgba(201, 232, 70, .24)); }
  100% { transform: scale(1); }
}

.arara-is-fresh .tap-button__character { filter: saturate(1.08) contrast(1.03) drop-shadow(0 14px 18px rgba(0, 0, 0, .58)) !important; }
.arara-is-tired .tap-button__character { filter: saturate(.84) brightness(.92) drop-shadow(0 13px 17px rgba(0, 0, 0, .62)) !important; }
.arara-is-weak .tap-button__character { filter: saturate(.62) brightness(.8) drop-shadow(0 12px 16px rgba(0, 0, 0, .66)) !important; }
.arara-is-resting .tap-button__character { filter: grayscale(.28) saturate(.48) brightness(.7) drop-shadow(0 11px 15px rgba(0, 0, 0, .7)) !important; }

.tap-cry {
  display: grid !important;
  min-width: clamp(102px, 31vw, 138px) !important;
  min-height: clamp(64px, 20vw, 82px) !important;
  padding: 13px 17px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 50% 50%, #fff7d2 0 38%, #f2c754 39% 59%, #dd352a 60% 73%, #632e86 74% 100%) !important;
  clip-path: polygon(50% 0, 59% 17%, 76% 6%, 78% 27%, 98% 25%, 85% 44%, 100% 55%, 80% 63%, 88% 84%, 66% 78%, 55% 100%, 45% 80%, 25% 94%, 25% 72%, 3% 73%, 17% 53%, 0 39%, 21% 34%, 15% 13%, 39% 22%);
  color: #28100c !important;
  font-size: clamp(14px, 4.2vw, 20px) !important;
  font-weight: 950 !important;
  line-height: .92 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  -webkit-text-stroke: .35px rgba(255, 255, 255, .38);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .66) !important;
  filter: drop-shadow(0 9px 0 rgba(14, 5, 8, .25)) drop-shadow(0 12px 18px rgba(0, 0, 0, .48));
  animation: arara-comic-shout 1.68s cubic-bezier(.16, .78, .22, 1) both !important;
}
@keyframes arara-comic-shout {
  0% { opacity: 0; transform: rotate(var(--cry-tilt)) scale(.34); }
  15% { opacity: 1; transform: rotate(var(--cry-tilt)) scale(1.08); }
  27% { transform: rotate(calc(var(--cry-tilt) * .55)) scale(.98); }
  72% { opacity: 1; transform: rotate(calc(var(--cry-tilt) * .3)) scale(1); }
  100% { opacity: 0; transform: rotate(0) translateY(-10px) scale(1.045); }
}

.energy-track i,
.ticket-progress__track i {
  background: linear-gradient(90deg, var(--costume-red), var(--premium-gold-bright), var(--costume-acid)) !important;
  box-shadow: 0 0 12px rgba(201, 232, 70, .2) !important;
}
.primary-button,
.daily-card__button,
.task-card__action,
.arara-shout-card__button,
.adsgram-card__button {
  border-color: rgba(244, 208, 105, .5) !important;
  background: linear-gradient(180deg, #efc862 0%, #b97931 100%) !important;
  color: #171008 !important;
}
.task-card__action.is-claimed {
  border-color: rgba(201, 232, 70, .3) !important;
  background: rgba(201, 232, 70, .09) !important;
  color: #d9ee83 !important;
}

.bottom-nav button.is-active {
  background: rgba(201, 232, 70, .075) !important;
  color: var(--costume-acid) !important;
}
.bottom-nav {
  right: auto !important;
  left: 50% !important;
  translate: -50% 0 !important;
}
.bottom-nav button.is-active::before {
  filter: saturate(1.08) contrast(1.05) brightness(1.08) drop-shadow(0 0 8px rgba(201, 232, 70, .3)) !important;
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .app-shell {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
  }
  [data-screen="tap"].is-active {
    display: grid !important;
    grid-template-columns: minmax(240px, .92fr) minmax(300px, 1.08fr);
    align-items: start;
    gap: 8px 12px !important;
  }
  [data-screen="tap"] > .prize-card,
  [data-screen="tap"] > .player-strip,
  [data-screen="tap"] > .daily-card,
  [data-screen="tap"] > .arara-shout-card,
  [data-screen="tap"] > .adsgram-card { grid-column: 1; }
  [data-screen="tap"] > .tap-zone {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin: 0 !important;
    padding: 9px 11px 10px !important;
  }
  .score-lockup { min-height: 44px !important; }
  .score-lockup strong { font-size: 32px !important; }
  .prize-card { min-height: 104px !important; }
  .prize-card__main strong { font-size: 34px !important; }
  .prize-card__stats { margin-top: 6px !important; }
  .player-strip { min-height: 56px !important; }
  .tap-orbit {
    width: min(20vw, 150px) !important;
    height: min(20vw, 150px) !important;
    aspect-ratio: 1 !important;
  }
  .tap-hint { margin-top: -2px !important; }
  .ticket-progress { margin-top: 6px !important; padding-block: 7px !important; }
  .ticket-progress small,
  .daily-card__copy small { display: none !important; }
  .daily-card { min-height: 58px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tap-button__aura,
  .tap-button__shine,
  .tap-orbit__ring { animation: none !important; }
  .tap-cry { display: none !important; }
}