:root {
  color-scheme: light;
  font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  background: #f8f5ed;
  color: #332d2a;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: pan-y;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(circle at 18% 6%, rgba(255, 221, 129, 0.18), transparent 26rem),
    radial-gradient(circle at 78% 16%, rgba(119, 95, 224, 0.24), transparent 34rem),
    radial-gradient(circle at 52% 90%, rgba(74, 216, 202, 0.16), transparent 30rem),
    linear-gradient(135deg, #100b22 0%, #1c1635 42%, #0d2432 100%);
  transition: background 320ms ease;
}

body[data-rarity="rare"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 225, 112, 0.4), transparent 26rem),
    radial-gradient(circle at 86% 22%, rgba(153, 129, 255, 0.28), transparent 28rem),
    linear-gradient(135deg, #fff8e9 0%, #edf7ff 48%, #fff1f7 100%);
}

body[data-rarity="legend"] {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 224, 113, 0.5), transparent 28rem),
    radial-gradient(circle at 78% 22%, rgba(88, 75, 148, 0.28), transparent 28rem),
    linear-gradient(135deg, #fff7d5 0%, #eaf4ff 48%, #f8ecff 100%);
}

body[data-rarity="premium"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 240, 168, 0.62), transparent 26rem),
    radial-gradient(circle at 82% 22%, rgba(122, 222, 199, 0.36), transparent 28rem),
    linear-gradient(135deg, #fff9df 0%, #f2fbff 42%, #fff0fa 100%);
}

body[data-form="stone"] {
  background: linear-gradient(135deg, #f4f0e8, #e8edf2 48%, #fff8e9);
}

body[data-form="fluffy"],
body[data-form="fairy"],
body[data-form="platinumFairy"] {
  background: linear-gradient(135deg, #fff8e9, #fff0fa 48%, #f0fff9);
}

body[data-form="dog"],
body[data-form="goldenEden"] {
  background: linear-gradient(135deg, #fff4d4, #fff8e9 48%, #fff0f4);
}

body[data-form="devil"],
body[data-form="fallen"],
body[data-form="abyssEmperor"] {
  background:
    radial-gradient(circle at 80% 18%, rgba(125, 69, 198, 0.36), transparent 24rem),
    linear-gradient(135deg, #fff8e9 0%, #f5efff 44%, #fff0f6 100%);
}

body[data-form="seraph"],
body[data-form="celestialPrincess"] {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 224, 113, 0.58), transparent 24rem),
    linear-gradient(135deg, #fff9df 0%, #f4fbff 48%, #fff4fa 100%);
}

body[data-form="moon"],
body[data-form="moonQueen"],
body[data-form="nocturne"],
body[data-form="dreamPlush"],
body[data-form="deepJellyQueen"] {
  background:
    radial-gradient(circle at 80% 16%, rgba(132, 223, 255, 0.36), transparent 20rem),
    radial-gradient(circle at 18% 18%, rgba(179, 132, 255, 0.34), transparent 24rem),
    linear-gradient(135deg, #f5f3ff 0%, #edf4ff 48%, #fff8e9 100%);
}

body[data-form="dragon"],
body[data-form="auroraDragon"],
body[data-form="genesisDragon"],
body[data-form="gearDragon"],
body[data-form="prism"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(122, 222, 199, 0.44), transparent 24rem),
    radial-gradient(circle at 80% 18%, rgba(255, 159, 210, 0.34), transparent 22rem),
    linear-gradient(135deg, #fff8e9 0%, #eefcff 48%, #fff6df 100%);
}

body[data-form="voidSeraph"],
body[data-form="nullCrown"],
body[data-form="gotNullState"] {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 224, 113, 0.42), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(80, 62, 140, 0.36), transparent 24rem),
    linear-gradient(135deg, #fff8e9 0%, #f3edff 45%, #fff7dc 100%);
}

body[data-form="mirrorEmpress"],
body[data-form="platinumArk"],
body[data-form="edenNova"],
body[data-form="crystalFox"],
body[data-form="groveStag"],
body[data-form="melodyCat"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(225, 245, 255, 0.72), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(255, 201, 234, 0.38), transparent 24rem),
    linear-gradient(135deg, #fff8e9 0%, #f4fbff 48%, #fff0fa 100%);
}

body[data-form="lampDjinn"] {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 216, 103, 0.56), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(126, 69, 198, 0.28), transparent 24rem),
    linear-gradient(135deg, #fff5d0 0%, #ffe8bc 46%, #f5edff 100%);
}

body[data-item-event="abyss"] {
  background:
    radial-gradient(circle at 50% 12%, rgba(74, 42, 122, 0.36), transparent 26rem),
    radial-gradient(circle at 82% 24%, rgba(255, 222, 139, 0.34), transparent 20rem),
    linear-gradient(135deg, #fff8e9 0%, #f2eaff 46%, #fff1f6 100%);
}

body[data-item-event="holy"] {
  background:
    radial-gradient(circle at 42% 10%, rgba(255, 230, 118, 0.58), transparent 26rem),
    linear-gradient(135deg, #fffbea 0%, #f5fbff 48%, #fff3fb 100%);
}

body[data-item-event="aurora"] {
  background:
    radial-gradient(circle at 24% 18%, rgba(121, 236, 203, 0.46), transparent 25rem),
    radial-gradient(circle at 76% 12%, rgba(255, 146, 211, 0.42), transparent 24rem),
    linear-gradient(135deg, #fff8e9 0%, #ebfcff 44%, #fff4db 100%);
}

body[data-item-event="mirror"] {
  background:
    radial-gradient(circle at 44% 12%, rgba(224, 247, 255, 0.82), transparent 24rem),
    radial-gradient(circle at 82% 22%, rgba(187, 190, 255, 0.38), transparent 22rem),
    linear-gradient(135deg, #fff8e9 0%, #f6fbff 48%, #fff1fb 100%);
}

body[data-item-event="soul"],
body[data-item-event="royal"] {
  background:
    radial-gradient(circle at 48% 12%, rgba(255, 220, 88, 0.6), transparent 25rem),
    radial-gradient(circle at 80% 20%, rgba(145, 108, 255, 0.24), transparent 24rem),
    linear-gradient(135deg, #fff8e9 0%, #fff7d8 48%, #f4f9ff 100%);
}

body[data-form] {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 230, 139, 0.16), transparent 26rem),
    radial-gradient(circle at 78% 14%, rgba(139, 90, 217, 0.24), transparent 32rem),
    radial-gradient(circle at 50% 86%, rgba(71, 224, 212, 0.16), transparent 32rem),
    linear-gradient(135deg, #100b22 0%, #1d1535 44%, #0c2630 100%);
}

body[data-rarity="legend"],
body[data-rarity="premium"],
body[data-rarity="got"] {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 232, 143, 0.22), transparent 28rem),
    radial-gradient(circle at 76% 16%, rgba(150, 122, 255, 0.3), transparent 34rem),
    radial-gradient(circle at 50% 82%, rgba(102, 244, 226, 0.2), transparent 32rem),
    linear-gradient(135deg, #080713 0%, #171030 42%, #06242c 100%);
}

.brand-mark {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 5;
  color: rgba(51, 45, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark:hover {
  color: rgba(51, 45, 42, 0.82);
}

button,
input {
  font: inherit;
}

button,
.pet-stage,
.stage-action-rail {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app-shell {
  width: min(1680px, calc(100% - 18px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 0;
  display: grid;
  grid-template-columns: minmax(620px, 1.45fr) minmax(340px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.pet-panel,
.board-panel,
.ranking-panel,
.item-shop-panel,
.catalog-panel,
.admin-panel,
.admin-tools,
.register-panel {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(188, 143, 44, 0.34);
  border-radius: 8px;
  box-shadow:
    0 18px 48px rgba(116, 80, 50, 0.14),
    inset 0 0 0 2px rgba(255, 232, 154, 0.38);
}

.pet-panel {
  position: relative;
  padding: clamp(14px, 2vw, 24px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)) padding-box,
    linear-gradient(135deg, #fff0a8, #d3a83f 46%, #fff7cf) border-box;
  border: 2px solid transparent;
}

.board-panel {
  padding: 18px;
  align-self: stretch;
}

.ranking-panel {
  padding: 22px;
}

.item-shop-panel {
  grid-column: 1 / -1;
  padding: 20px 22px;
}

.catalog-panel {
  grid-column: 1 / -1;
  padding: 20px 22px;
}

.admin-panel {
  grid-column: 1 / -1;
  padding: 18px 22px;
}

.admin-tools {
  grid-column: 1 / -1;
  padding: 18px 22px;
}

.admin-tools[hidden] {
  display: none;
}

.title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.title-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.voice-toggle {
  min-width: 86px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 232, 154, 0.5);
  border-radius: 999px;
  color: #fff8cf;
  background: linear-gradient(135deg, rgba(38, 27, 76, 0.92), rgba(139, 90, 217, 0.88));
  box-shadow: 0 8px 20px rgba(28, 18, 52, 0.18);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
}

.voice-toggle[data-enabled="true"] {
  color: #2f2926;
  background: linear-gradient(135deg, #fff1a3, #ff9ed0 55%, #8ddfff);
  box-shadow:
    0 8px 20px rgba(28, 18, 52, 0.18),
    0 0 20px rgba(255, 224, 113, 0.42);
}

.eyebrow {
  margin: 0 0 6px;
  color: #53755b;
  font-size: 0.78rem;
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0;
}

h1 {
  width: fit-content;
  background: linear-gradient(90deg, #25164d 0%, #8b5ad9 28%, #00a6c8 52%, #f06ba8 75%, #b98a24 100%);
  background-clip: text;
  color: transparent;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  font-weight: 950;
  text-shadow: 0 10px 28px rgba(139, 90, 217, 0.16);
}

h2 {
  font-size: 1.2rem;
}

.status-pill {
  flex: 0 0 auto;
  min-width: 74px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #e9f6dc;
  color: #37613e;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.status-pill.error {
  background: #ffe3e1;
  color: #8d312b;
}

.pet-stage {
  height: clamp(470px, 51vh, 660px);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(201, 153, 55, 0.44);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 252, 241, 0.18), rgba(255, 248, 231, 0.1)),
    radial-gradient(circle at 50% 12%, rgba(255, 226, 130, 0.42), transparent 36%),
    #fff8e9;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    inset 0 0 34px rgba(255, 226, 130, 0.24),
    0 18px 42px rgba(102, 70, 38, 0.14);
}

.pet-stage::before,
.pet-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pet-stage::before {
  z-index: 2;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255, 238, 160, 0.48), transparent 16%, transparent 84%, rgba(255, 238, 160, 0.48)),
    linear-gradient(0deg, rgba(75, 44, 22, 0.24), transparent 18%, transparent 82%, rgba(255, 250, 220, 0.32));
  mix-blend-mode: soft-light;
}

.pet-stage::after {
  z-index: 3;
  opacity: 0;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.78) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 26%, rgba(255, 224, 132, 0.74) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 72%, rgba(255, 171, 217, 0.7) 0 2px, transparent 3px);
  background-size: 110px 110px, 150px 150px, 180px 180px;
  animation: stageSparkles 4.8s linear infinite;
}

.monster-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.03);
  transform-origin: center bottom;
  animation: monsterBreath 5.2s ease-in-out infinite;
}

.stage-action-rail {
  position: absolute;
  left: 12px;
  top: 74px;
  z-index: 5;
  width: min(160px, 25%);
  display: grid;
  gap: 8px;
}

.monster-art[hidden] {
  display: none;
}

.pet-stage.has-monster-art .pet {
  display: none;
}

body[data-rarity="legend"] .pet-stage,
body[data-rarity="premium"] .pet-stage {
  border-color: rgba(230, 190, 82, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 0 48px rgba(255, 226, 130, 0.32),
    0 18px 46px rgba(102, 70, 38, 0.18),
    0 0 32px rgba(255, 224, 113, 0.22);
}

body[data-rarity="got"] .pet-stage {
  border-color: rgba(245, 235, 184, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.86),
    inset 0 0 58px rgba(255, 255, 255, 0.34),
    0 24px 60px rgba(44, 34, 86, 0.24),
    0 0 44px rgba(184, 219, 255, 0.44);
}

body[data-rarity="legend"] .pet-stage::after,
body[data-rarity="premium"] .pet-stage::after,
body[data-rarity="got"] .pet-stage::after {
  opacity: 0.82;
}

.pet-stage.item-event-active .monster-art {
  animation: premiumMonsterMotion 1.65s ease-in-out infinite;
}

.click-effect {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  pointer-events: none;
  color: #fff8c7;
  transform: translate(-50%, -50%);
  animation: clickEffectPop 1180ms ease-out both;
}

.click-effect::before,
.click-effect::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  border: 3px solid currentColor;
  opacity: 0.96;
  box-shadow:
    0 0 22px currentColor,
    0 0 38px rgba(255, 255, 255, 0.32),
    inset 0 0 18px currentColor;
  animation: clickRing 1050ms ease-out both;
}

.click-effect::after {
  inset: 26px;
  border-style: dotted;
  animation-delay: 80ms;
}

.click-effect i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 12px currentColor,
    0 0 24px currentColor;
  animation: clickParticle 980ms ease-out var(--delay) both;
}

.click-effect i:nth-child(3n) {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  transform: rotate(var(--rotate));
}

.click-effect i:nth-child(4n) {
  background: transparent;
  border: 2px solid currentColor;
}

.click-effect-star {
  color: #ffe66d;
  width: 108px;
  height: 108px;
}

.click-effect-heart {
  color: #ff9fd2;
  width: 122px;
  height: 122px;
}

.click-effect-heart i {
  border-radius: 999px 999px 2px 999px;
  transform: rotate(45deg);
}

.click-effect-comet {
  color: #91e8ff;
  width: 170px;
  height: 118px;
}

.click-effect-comet::before {
  inset: auto;
  left: 6px;
  top: 34px;
  width: 148px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(145, 232, 255, 0.28), currentColor);
  box-shadow:
    0 0 22px currentColor,
    0 0 42px currentColor;
  transform: rotate(-18deg);
  animation: cometTail 780ms ease-out both;
}

.click-effect-comet::after {
  inset: auto;
  right: 8px;
  top: 24px;
  width: 42px;
  height: 42px;
  border: 0;
  background:
    radial-gradient(circle, #fff 0 20%, currentColor 22% 48%, transparent 50%);
  box-shadow:
    0 0 28px currentColor,
    0 0 48px currentColor;
  animation: cometHead 780ms ease-out both;
}

.click-effect-comet i {
  width: 7px;
  height: 7px;
}

.click-effect-burst {
  color: #ffbd58;
  width: 178px;
  height: 178px;
}

.click-effect-burst::before {
  inset: 18px;
  border-radius: 18px;
  transform: rotate(45deg);
}

.click-effect-crown {
  color: #fff1a3;
  width: 210px;
  height: 170px;
}

.click-effect-crown::before {
  inset: 28px 24px 44px;
  border-radius: 12px 12px 26px 26px;
  background:
    linear-gradient(135deg, transparent 14%, currentColor 16% 28%, transparent 30%),
    linear-gradient(45deg, transparent 38%, currentColor 40% 52%, transparent 54%),
    linear-gradient(-45deg, transparent 38%, currentColor 40% 52%, transparent 54%);
  border: 0;
  opacity: 0.86;
  filter: drop-shadow(0 0 18px currentColor);
}

.click-effect-myth {
  color: #f4fbff;
  width: 280px;
  height: 280px;
  animation-duration: 1700ms;
}

.click-effect-myth::before {
  inset: 18px;
  border-width: 3px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 6%, transparent 8%),
    conic-gradient(from 90deg, rgba(255, 255, 255, 0), rgba(133, 225, 255, 0.82), rgba(255, 167, 224, 0.78), rgba(255, 241, 163, 0.82), rgba(255, 255, 255, 0));
  filter: blur(0.2px) drop-shadow(0 0 28px rgba(255, 255, 255, 0.8));
}

.click-effect-myth::after {
  inset: 52px;
  border-width: 3px;
  border-style: solid;
  transform: rotate(45deg);
}

@keyframes clickEffectPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -96%) scale(0.88);
  }
}

@keyframes clickRing {
  0% {
    opacity: 0.9;
    transform: scale(0.22) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.35) rotate(90deg);
  }
}

@keyframes clickParticle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5) rotate(var(--rotate));
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.1) rotate(calc(var(--rotate) + 180deg));
  }
}

@keyframes cometTail {
  0% {
    opacity: 0;
    transform: translate(-28px, 18px) rotate(-18deg) scaleX(0.24);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(34px, -20px) rotate(-18deg) scaleX(1.12);
  }
}

@keyframes cometHead {
  0% {
    opacity: 0;
    transform: translate(-60px, 32px) scale(0.45);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(12px, -10px) scale(1.05);
  }
}

body[data-item-event="abyss"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.18) contrast(1.08) drop-shadow(0 0 22px rgba(116, 63, 210, 0.5));
}

body[data-item-event="holy"] .pet-stage.item-event-active .monster-art,
body[data-item-event="royal"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.12) brightness(1.08) drop-shadow(0 0 24px rgba(255, 223, 121, 0.56));
}

body[data-item-event="aurora"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.28) brightness(1.06) hue-rotate(10deg) drop-shadow(0 0 24px rgba(112, 236, 219, 0.56));
}

body[data-item-event="mirror"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.04) brightness(1.08) drop-shadow(0 0 24px rgba(211, 242, 255, 0.74));
}

body[data-item-event="flora"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.18) brightness(1.07) drop-shadow(0 0 24px rgba(255, 153, 205, 0.62));
}

body[data-item-event="crystal"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.2) contrast(1.06) drop-shadow(0 0 26px rgba(134, 235, 255, 0.64));
}

body[data-item-event="water"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.08) brightness(1.09) drop-shadow(0 0 24px rgba(157, 225, 255, 0.68));
}

body[data-item-event="flame"] .pet-stage.item-event-active .monster-art {
  filter: saturate(1.22) brightness(1.06) drop-shadow(0 0 26px rgba(255, 142, 72, 0.68));
}

body[data-form="edenNova"] .monster-art {
  object-fit: contain;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 213, 237, 0.72), transparent 34%),
    linear-gradient(135deg, #241b45 0%, #fff1fb 52%, #fff8e9 100%);
}

body[data-form="edenNova"] .reaction-bubble {
  top: 12px;
  left: 18px;
  max-width: min(250px, calc(100% - 36px));
  transform: none;
}

.reaction-bubble {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 2;
  min-width: 86px;
  padding: 8px 12px;
  border: 1px solid rgba(112, 86, 57, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #5d5048;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(116, 80, 50, 0.1);
}

body[data-form="egg"] .reaction-bubble {
  border-color: rgba(168, 124, 255, 0.3);
  background: linear-gradient(135deg, rgba(255, 250, 255, 0.96), rgba(236, 244, 255, 0.94));
  color: #6a4b9f;
  box-shadow: 0 10px 24px rgba(147, 111, 221, 0.18);
}

body[data-form="stone"] .reaction-bubble,
body[data-form="gearDragon"] .reaction-bubble {
  border-color: rgba(112, 124, 132, 0.36);
  background: linear-gradient(135deg, rgba(250, 253, 250, 0.96), rgba(218, 230, 226, 0.94));
  color: #374449;
  box-shadow: 0 10px 24px rgba(77, 92, 92, 0.2);
}

body[data-form="fluffy"] .reaction-bubble,
body[data-form="dog"] .reaction-bubble,
body[data-form="luminous"] .reaction-bubble,
body[data-form="dreamPlush"] .reaction-bubble {
  border-color: rgba(255, 147, 199, 0.36);
  background: linear-gradient(135deg, rgba(255, 250, 253, 0.97), rgba(255, 224, 241, 0.95));
  color: #8b4268;
  box-shadow: 0 10px 24px rgba(255, 128, 190, 0.2);
}

body[data-form="nocturne"] .reaction-bubble,
body[data-form="devil"] .reaction-bubble,
body[data-form="abyssEmperor"] .reaction-bubble,
body[data-form="voidSeraph"] .reaction-bubble,
body[data-form="nullCrown"] .reaction-bubble,
body[data-form="gotNullState"] .reaction-bubble {
  border-color: rgba(180, 128, 255, 0.48);
  background: linear-gradient(135deg, rgba(37, 22, 65, 0.94), rgba(88, 31, 112, 0.92));
  color: #f7eaff;
  text-shadow: 0 1px 8px rgba(239, 204, 255, 0.42);
  box-shadow: 0 12px 30px rgba(83, 38, 150, 0.34);
}

body[data-form="prism"] .reaction-bubble,
body[data-form="dragon"] .reaction-bubble,
body[data-form="auroraDragon"] .reaction-bubble,
body[data-form="genesisDragon"] .reaction-bubble {
  border-color: rgba(91, 222, 255, 0.45);
  background: linear-gradient(135deg, rgba(238, 253, 255, 0.96), rgba(255, 239, 252, 0.94));
  color: #245a7b;
  box-shadow: 0 12px 28px rgba(65, 197, 244, 0.24);
}

body[data-form="seraph"] .reaction-bubble,
body[data-form="celestialPrincess"] .reaction-bubble,
body[data-form="goldenEden"] .reaction-bubble,
body[data-form="platinumArk"] .reaction-bubble {
  border-color: rgba(218, 171, 65, 0.44);
  background: linear-gradient(135deg, rgba(255, 253, 240, 0.98), rgba(255, 236, 171, 0.94));
  color: #744d14;
  box-shadow: 0 12px 30px rgba(190, 136, 35, 0.22);
}

body[data-form="eden"] .reaction-bubble,
body[data-form="edenNova"] .reaction-bubble {
  border-color: rgba(255, 132, 197, 0.44);
  background: linear-gradient(135deg, rgba(255, 249, 253, 0.98), rgba(255, 216, 238, 0.95), rgba(255, 246, 206, 0.93));
  color: #9b3b74;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 30px rgba(255, 132, 197, 0.26);
}

body[data-form="oracle"] .reaction-bubble,
body[data-form="lampDjinn"] .reaction-bubble {
  border-color: rgba(207, 157, 82, 0.42);
  background: linear-gradient(135deg, rgba(255, 248, 230, 0.97), rgba(237, 219, 178, 0.94));
  color: #6f4212;
  box-shadow: 0 12px 28px rgba(172, 117, 49, 0.22);
}

body[data-form="deepJellyQueen"] .reaction-bubble,
body[data-form="crystalFox"] .reaction-bubble {
  border-color: rgba(118, 219, 255, 0.42);
  background: linear-gradient(135deg, rgba(240, 253, 255, 0.98), rgba(209, 235, 255, 0.94));
  color: #245572;
  box-shadow: 0 12px 28px rgba(88, 184, 229, 0.22);
}

body[data-form="mirrorEmpress"] .reaction-bubble,
body[data-form="groveStag"] .reaction-bubble,
body[data-form="melodyCat"] .reaction-bubble {
  border-color: rgba(173, 150, 255, 0.38);
  background: linear-gradient(135deg, rgba(250, 248, 255, 0.98), rgba(231, 226, 255, 0.94));
  color: #4f437f;
  box-shadow: 0 12px 28px rgba(127, 111, 204, 0.2);
}

.item-event {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 4;
  width: min(420px, calc(100% - 24px));
  transform: translateX(-50%);
  padding: 12px 14px;
  border: 1px solid rgba(188, 143, 44, 0.42);
  border-radius: 8px;
  background: rgba(255, 252, 241, 0.94);
  box-shadow: 0 18px 34px rgba(88, 58, 35, 0.18);
  text-align: left;
  animation: itemEventIn 420ms ease both;
}

.item-event[hidden] {
  display: none;
}

.item-event::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 14px;
  opacity: 0.7;
  background: radial-gradient(circle, rgba(255, 220, 100, 0.42), transparent 68%);
  animation: itemAuraPulse 1.8s ease-in-out infinite;
}

.item-event[data-tone="abyss"]::before {
  background: radial-gradient(circle, rgba(112, 66, 190, 0.48), transparent 68%);
}

.item-event[data-tone="aurora"]::before {
  background: radial-gradient(circle, rgba(80, 224, 203, 0.46), transparent 64%);
}

.item-event[data-tone="mirror"]::before {
  background: radial-gradient(circle, rgba(211, 242, 255, 0.76), transparent 64%);
}

.item-event[data-tone="flora"]::before {
  background:
    radial-gradient(circle at 35% 45%, rgba(255, 153, 205, 0.52), transparent 42%),
    radial-gradient(circle, rgba(255, 232, 146, 0.44), transparent 68%);
}

.item-event[data-tone="crystal"]::before {
  background:
    conic-gradient(from 0deg, rgba(134, 235, 255, 0.1), rgba(179, 146, 255, 0.54), rgba(255, 255, 255, 0.1), rgba(134, 235, 255, 0.1));
  animation: itemAuraPulse 1.2s ease-in-out infinite, itemSpin 4s linear infinite;
}

.item-event[data-tone="water"]::before {
  background:
    radial-gradient(circle at 42% 28%, rgba(157, 225, 255, 0.52), transparent 32%),
    radial-gradient(circle, rgba(205, 245, 255, 0.52), transparent 68%);
}

.item-event[data-tone="flame"]::before {
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 97, 92, 0.44), transparent 34%),
    radial-gradient(circle, rgba(255, 205, 82, 0.52), transparent 70%);
}

.item-event-kicker {
  display: block;
  color: #7c5a14;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.item-event strong {
  display: block;
  margin-top: 3px;
  color: #332d2a;
  font-size: 1.02rem;
}

.item-event p {
  margin: 6px 0 4px;
  color: #3e352f;
  font-size: 0.86rem;
  line-height: 1.55;
}

.item-event small {
  color: #6d5f55;
  font-size: 0.74rem;
  font-weight: 700;
}

.item-event[data-intensity="premium"],
.item-event[data-intensity="mythic"] {
  border-color: rgba(145, 105, 18, 0.64);
  background:
    linear-gradient(rgba(255, 252, 241, 0.95), rgba(255, 252, 241, 0.95)) padding-box,
    linear-gradient(135deg, #fff0a8, #b98a24, #fff7cf) border-box;
  border: 2px solid transparent;
}

.item-event[data-intensity="mythic"] {
  box-shadow:
    0 0 0 1px rgba(255, 226, 128, 0.7),
    0 20px 52px rgba(97, 57, 18, 0.26);
}

.pet {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 46% 46% 42% 42%;
  background: linear-gradient(150deg, #ffd778, #ffb47b 60%, #f7908c);
  box-shadow:
    inset -15px -18px 0 rgba(191, 97, 81, 0.13),
    0 16px 0 rgba(77, 53, 41, 0.08);
  transform-origin: center bottom;
  animation: bob 2.8s ease-in-out infinite;
}

.pet.item-event-active {
  animation: premiumPetMotion 1.8s ease-in-out infinite;
}

.pet::before,
.pet::after {
  content: "";
  position: absolute;
}

.pet {
  overflow: visible;
}

.pet .mouth::after {
  content: "";
  position: absolute;
  left: -46px;
  top: -82px;
  width: 96px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
  transform: rotate(-14deg);
  pointer-events: none;
}

body[data-stage="1"] .pet::after {
  left: 50%;
  top: -18px;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    -72px 92px 0 rgba(255, 215, 102, 0.55),
    78px 110px 0 rgba(141, 213, 255, 0.55);
  transform: translateX(-50%) rotate(-18deg);
}

body[data-stage="1"] .pet-panel:has(.hatch-guide[data-step="3"]) .pet,
body[data-stage="1"] .pet-panel:has(.hatch-guide[data-step="4"]) .pet {
  box-shadow:
    inset -15px -18px 0 rgba(191, 97, 81, 0.13),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 34px rgba(255, 215, 102, 0.42);
}

body[data-rarity="legend"] .pet,
body[data-rarity="premium"] .pet {
  transform-style: preserve-3d;
  box-shadow:
    inset -18px -22px 0 rgba(77, 53, 41, 0.12),
    inset 12px 14px 0 rgba(255, 255, 255, 0.2),
    0 18px 0 rgba(77, 53, 41, 0.08),
    0 0 42px rgba(255, 224, 113, 0.5);
}

.ear {
  position: absolute;
  top: -20px;
  width: 56px;
  height: 66px;
  border-radius: 56px 56px 22px 22px;
  background: #ffb46f;
  z-index: -1;
}

.ear.left {
  left: 16px;
  transform: rotate(-24deg);
}

.ear.right {
  right: 16px;
  transform: rotate(24deg);
}

.eye {
  position: absolute;
  top: 70px;
  width: 18px;
  height: 22px;
  border-radius: 999px;
  background: #332d2a;
}

.eye.left {
  left: 52px;
}

.eye.right {
  right: 52px;
}

.mouth {
  position: absolute;
  left: 50%;
  top: 106px;
  width: 42px;
  height: 22px;
  border: 5px solid #332d2a;
  border-top: 0;
  border-radius: 0 0 42px 42px;
  transform: translateX(-50%);
}

.phase-text {
  width: fit-content;
  max-width: 100%;
  min-height: 1.3em;
  margin: 8px auto 16px;
  padding: 7px 16px;
  border: 1px solid rgba(188, 143, 44, 0.34);
  border-radius: 999px;
  color: #6d5f55;
  background: rgba(255, 252, 241, 0.86);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 18px rgba(80, 53, 34, 0.1);
}

body[data-rarity="rare"] .phase-text {
  color: #6c3bc0;
  border-color: rgba(139, 90, 217, 0.34);
}

body[data-rarity="epic"] .phase-text,
body[data-rarity="legend"] .phase-text {
  color: #7c5a14;
  border-color: rgba(188, 143, 44, 0.52);
  background: linear-gradient(135deg, rgba(255, 250, 220, 0.92), rgba(255, 226, 130, 0.72));
}

body[data-rarity="premium"] .phase-text {
  color: #523299;
  border-color: rgba(255, 178, 226, 0.72);
  background: linear-gradient(135deg, rgba(255, 246, 253, 0.94), rgba(255, 210, 236, 0.72), rgba(217, 252, 255, 0.74));
}

body[data-rarity="got"] .phase-text {
  color: #fdf6c9;
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(135deg, #211646, #6e5ee8 44%, #d8f4ff);
  box-shadow: 0 0 28px rgba(184, 219, 255, 0.38);
}

.hatch-guide {
  display: grid;
  gap: 5px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(188, 143, 44, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 253, 250, 0.9), rgba(255, 245, 228, 0.86)),
    #fffdfa;
}

.hatch-guide > span {
  color: #8a6930;
  font-size: 0.7rem;
  font-weight: 900;
}

.hatch-guide > strong {
  color: #3f342e;
  font-size: 0.94rem;
}

.hatch-guide > p {
  margin: 0;
  color: #6d5f55;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.hatch-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 3px;
}

.hatch-steps span {
  height: 5px;
  border-radius: 999px;
  background: rgba(112, 86, 57, 0.12);
}

.hatch-steps span.active {
  background: linear-gradient(90deg, #ffd766, #ff9fd2);
}

.aura-panel {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(188, 143, 44, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 244, 196, 0.82), rgba(255, 253, 250, 0.92)),
    #fffdfa;
  box-shadow: inset 0 0 0 2px rgba(255, 232, 154, 0.2);
}

.aura-panel span {
  color: #8a6930;
  font-size: 0.72rem;
  font-weight: 900;
}

.aura-panel strong {
  color: #3f342e;
  font-size: 0.98rem;
}

.aura-panel p {
  margin: 0;
  color: #6d5f55;
  font-size: 0.82rem;
  font-weight: 700;
}

.aura-panel small {
  color: #8a6930;
  font-size: 0.72rem;
  font-weight: 900;
}

.meter-wrap {
  display: grid;
  gap: 8px;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
}

.meter {
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  background: #efe4d5;
}

.meter-fill {
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fc66a, #ffd766);
  transition: width 180ms ease;
}

.meter-fill[data-fruit="devil"] {
  background: linear-gradient(90deg, #7d45c6, #c781ff);
}

.meter-fill[data-fruit="angel"] {
  background: linear-gradient(90deg, #ffd45c, #fff08a);
}

.meter-fill[data-fruit="apple"] {
  background: linear-gradient(90deg, #f05b75, #ff9a9d);
}

.meter-fill[data-mode="hammer"] {
  background: linear-gradient(90deg, #8c97a6, #d5d9df);
}

.meter-fill[data-mode="pet"] {
  background: linear-gradient(90deg, #ff8ec8, #ffd2e8);
}

.meter-fill[data-mode="warm"] {
  background: linear-gradient(90deg, #ffb456, #ffe58c);
}

.meter-fill[data-mode="devil"] {
  background: linear-gradient(90deg, #7d45c6, #c781ff);
}

.meter-fill[data-mode="angel"] {
  background: linear-gradient(90deg, #ffd45c, #fff08a);
}

.meter-fill[data-mode="apple"] {
  background: linear-gradient(90deg, #f05b75, #ff9a9d);
}

.meter-fill[data-mode="light"] {
  background: linear-gradient(90deg, #ffe063, #fff6b1);
}

.meter-fill[data-mode="shadow"] {
  background: linear-gradient(90deg, #4d4b86, #9b82d8);
}

.meter-fill[data-mode="harmony"] {
  background: linear-gradient(90deg, #5ad7b0, #ff9fd2 55%, #ffe36b);
}

.daily-limit {
  margin: 0;
  color: #8a6930;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.feed-button,
.comment-form button,
.auth-form button,
.guest-form button,
.register-form button {
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #2f2926;
  background: #ffd766;
  box-shadow: 0 5px 0 #dc9f3e;
}

.feed-button {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
}

.feed-actions {
  display: grid;
  gap: 10px;
}

.stage-action-rail .feed-actions {
  padding: 7px;
  border: 1px solid rgba(255, 232, 154, 0.42);
  border-radius: 12px;
  background: rgba(255, 252, 241, 0.78);
  box-shadow: 0 12px 30px rgba(28, 18, 52, 0.18);
  backdrop-filter: blur(8px);
}

.stage-action-rail .feed-button {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 0.76rem;
  line-height: 1.25;
}

.support-toggle {
  min-height: 38px;
  border: 1px solid rgba(255, 232, 154, 0.48);
  border-radius: 999px;
  color: #fff8cf;
  background: linear-gradient(135deg, rgba(38, 27, 76, 0.94), rgba(139, 90, 217, 0.9), rgba(188, 143, 44, 0.92));
  box-shadow: 0 10px 24px rgba(28, 18, 52, 0.24);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
}

body[data-form="fluffy"] .stage-action-rail .feed-button,
body[data-form="dog"] .stage-action-rail .feed-button,
body[data-form="luminous"] .stage-action-rail .feed-button,
body[data-form="dreamPlush"] .stage-action-rail .feed-button,
body[data-form="edenNova"] .stage-action-rail .feed-button {
  color: #5a3156;
  background: linear-gradient(135deg, #ffe2f1, #ffd76f);
  box-shadow: 0 4px 0 #e79dbd;
}

body[data-form="devil"] .stage-action-rail .feed-button,
body[data-form="abyssEmperor"] .stage-action-rail .feed-button,
body[data-form="voidSeraph"] .stage-action-rail .feed-button,
body[data-form="nullCrown"] .stage-action-rail .feed-button {
  color: #fff;
  background: linear-gradient(135deg, #221733, #7d45c6);
  box-shadow: 0 4px 0 #3d275f;
}

body[data-form="seraph"] .stage-action-rail .feed-button,
body[data-form="celestialPrincess"] .stage-action-rail .feed-button,
body[data-form="platinumArk"] .stage-action-rail .feed-button,
body[data-form="deepJellyQueen"] .stage-action-rail .feed-button,
body[data-form="crystalFox"] .stage-action-rail .feed-button {
  color: #5b4413;
  background: linear-gradient(135deg, #fff6bd, #eafaff);
  box-shadow: 0 4px 0 #d4b758;
}

body[data-form="dragon"] .stage-action-rail .feed-button,
body[data-form="auroraDragon"] .stage-action-rail .feed-button,
body[data-form="genesisDragon"] .stage-action-rail .feed-button,
body[data-form="gearDragon"] .stage-action-rail .feed-button,
body[data-form="gotNullState"] .stage-action-rail .feed-button {
  color: #f9fdff;
  background: linear-gradient(135deg, #0d4763, #5edfd1, #7d45c6);
  box-shadow: 0 4px 0 #143f5c;
}

body[data-form="mirrorEmpress"] .stage-action-rail .feed-button,
body[data-form="groveStag"] .stage-action-rail .feed-button,
body[data-form="melodyCat"] .stage-action-rail .feed-button {
  color: #2b3150;
  background: linear-gradient(135deg, #e9f8ff, #c8c5ff);
  box-shadow: 0 4px 0 #9fa8c8;
}

body[data-form="lampDjinn"] .stage-action-rail .feed-button {
  color: #44290a;
  background: linear-gradient(135deg, #ffe08b, #f5a85a, #a37cff);
  box-shadow: 0 4px 0 #9c6b34;
}

.quick-item-drawer {
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255, 232, 154, 0.5);
  border-radius: 12px;
  background: rgba(255, 252, 241, 0.95);
  box-shadow: 0 18px 38px rgba(28, 18, 52, 0.28);
}

.quick-item-drawer[hidden] {
  display: none;
}

.quick-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #3f342e;
  font-size: 0.82rem;
}

.quick-item-head button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #ffefd0;
  color: #7c5a14;
  cursor: pointer;
  font-weight: 900;
}

.quick-item-grid {
  display: grid;
  gap: 8px;
}

.item-card.compact {
  min-height: 0;
  padding: 10px;
  border-radius: 8px;
}

.item-card.compact h3 {
  font-size: 0.84rem;
}

.item-card.compact p {
  display: none;
}

.item-card.compact small {
  font-size: 0.68rem;
}

.item-card.compact .item-actions {
  grid-template-columns: 1fr;
}

.fruit-button.devil {
  color: #fff;
  background: #8b5ad9;
  box-shadow: 0 5px 0 #5f37a4;
}

.fruit-button.angel {
  background: #ffe075;
}

.fruit-button.apple {
  color: #fff;
  background: #f26d82;
  box-shadow: 0 5px 0 #bf4256;
}

.mood-button.light {
  background: #ffe979;
  box-shadow: 0 5px 0 #d6b941;
}

.mood-button.shadow {
  color: #fff;
  background: #6960b8;
  box-shadow: 0 5px 0 #464080;
}

.mood-button.harmony {
  background: linear-gradient(90deg, #8ee8c9, #ffc1df 58%, #ffe78a);
  box-shadow: 0 5px 0 #d69b91;
}

.egg-button.hammer {
  color: #fff;
  background: #7b8794;
  box-shadow: 0 5px 0 #515b65;
}

.egg-button.petting {
  background: #ffacd5;
  box-shadow: 0 5px 0 #d878aa;
}

.egg-button.warm {
  background: #ffcc72;
}

.feed-button:active,
.comment-form button:active,
.auth-form button:active,
.guest-form button:active,
.register-form button:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #dc9f3e;
}

.feed-button:disabled,
.comment-form button:disabled,
.auth-form button:disabled,
.guest-form button:disabled,
.register-form button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.egg-counts,
.mood-counts,
.fruit-counts {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.egg-counts[hidden],
.mood-counts[hidden],
.fruit-counts[hidden] {
  display: none;
}

.egg-count,
.mood-count,
.fruit-count {
  min-width: 0;
  padding: 7px 6px;
  border-radius: 8px;
  background: #fff8e9;
  border: 1px solid rgba(112, 86, 57, 0.12);
  text-align: center;
}

.egg-count span,
.egg-count strong,
.mood-count span,
.mood-count strong,
.fruit-count span,
.fruit-count strong {
  display: block;
}

.egg-count span,
.mood-count span,
.fruit-count span {
  font-size: 0.68rem;
  font-weight: 800;
}

.egg-count strong,
.mood-count strong,
.fruit-count strong {
  margin-top: 3px;
  font-size: 0.98rem;
}

.egg-count.hammer {
  border-color: rgba(123, 135, 148, 0.4);
}

.egg-count.petting {
  border-color: rgba(255, 142, 200, 0.45);
}

.egg-count.warm {
  border-color: rgba(225, 151, 39, 0.4);
}

.mood-count.light {
  border-color: rgba(230, 190, 45, 0.48);
}

.mood-count.shadow {
  border-color: rgba(105, 96, 184, 0.45);
}

.mood-count.harmony {
  border-color: rgba(84, 190, 153, 0.5);
}

.thanks-event {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(188, 143, 44, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 248, 218, 0.95), rgba(255, 241, 250, 0.92));
  box-shadow: inset 0 0 0 2px rgba(255, 232, 154, 0.2);
}

.thanks-event[hidden] {
  display: none;
}

.thanks-event span,
.thanks-event strong,
.thanks-event p {
  display: block;
}

.thanks-event > span {
  color: #8a6930;
  font-size: 0.72rem;
  font-weight: 900;
}

.thanks-event > strong {
  margin-top: 3px;
  font-size: 1rem;
}

.thanks-event > p {
  margin: 6px 0 10px;
  color: #6d5f55;
  font-size: 0.82rem;
  font-weight: 700;
}

.thanks-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.thanks-image {
  aspect-ratio: 1.25;
  border-radius: 8px;
  border: 1px solid rgba(188, 143, 44, 0.22);
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.86) 0 18px, transparent 19px),
    linear-gradient(145deg, #ffe071, #ff9fd2 52%, #8bd5ff);
  box-shadow: inset -8px -10px 0 rgba(77, 53, 41, 0.08);
}

.thanks-event button {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: #ffd766;
  box-shadow: 0 5px 0 #dc9f3e;
  font-weight: 900;
}

.thanks-event button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.fruit-count.devil {
  border-color: rgba(125, 69, 198, 0.35);
}

.fruit-count.angel {
  border-color: rgba(215, 164, 24, 0.38);
}

.fruit-count.apple {
  border-color: rgba(240, 91, 117, 0.35);
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 10px 0 12px;
}

.comment-form input,
.auth-form input,
.guest-form input,
.register-form input,
.reset-form input {
  min-width: 0;
  height: 38px;
  border: 1px solid #dfcfbc;
  border-radius: 8px;
  padding: 0 10px;
  background: #fffdfa;
}

.comment-form button,
.auth-form button,
.guest-form button,
.register-form button,
.reset-form button {
  min-width: 62px;
  height: 38px;
  border-radius: 8px;
}

.auth-form {
  display: grid;
  gap: 6px;
  margin: 8px 0 8px;
  padding: 10px;
  border: 1px solid rgba(112, 86, 57, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 233, 0.58);
}

.auth-form input,
.guest-form input,
.register-form input,
.auth-form button,
.guest-form button,
.register-form button {
  font-size: 0.86rem;
}

.guest-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin: 10px 0 8px;
}

.guest-form button {
  background: #ffe6a0;
  box-shadow: 0 5px 0 #d9b657;
}

.auth-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.register-link {
  display: grid;
  place-items: center;
  height: 38px;
  border-radius: 8px;
  background: #fff8e9;
  color: #6d5f55;
  border: 1px solid rgba(112, 86, 57, 0.16);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.register-shell {
  width: min(560px, calc(100% - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0;
  display: grid;
  align-items: center;
}

.register-panel {
  padding: clamp(20px, 5vw, 32px);
}

.back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #53755b;
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
}

.register-form {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.register-form button {
  height: 44px;
}

.register-message {
  min-height: 1.3em;
  margin: 12px 0 0;
  color: #37613e;
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.register-message.error {
  color: #8d312b;
}

.leave-button {
  width: 100%;
  min-height: 34px;
  margin: 0 0 8px;
  border: 1px solid rgba(112, 86, 57, 0.18);
  border-radius: 8px;
  cursor: pointer;
  background: #fff8e9;
  color: #6d5f55;
  font-size: 0.86rem;
  font-weight: 800;
}

.leave-button[hidden] {
  display: none;
}

.leave-button:active {
  transform: translateY(1px);
}

.leave-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.nickname-message {
  min-height: 1.25em;
  margin: 0 0 8px;
  color: #37613e;
  font-size: 0.78rem;
  font-weight: 800;
}

.nickname-message.error {
  color: #8d312b;
}

.active-users {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(112, 86, 57, 0.12);
  border-radius: 8px;
  background: #f5fbf4;
}

.active-users span {
  color: #53755b;
  font-size: 0.78rem;
  font-weight: 900;
}

.active-user-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 64px;
  overflow-y: auto;
  padding-right: 2px;
  color: #6d5f55;
  font-size: 0.9rem;
  font-weight: 700;
}

.active-user-list span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9f6dc;
  color: #37613e;
}

.active-user-list span[data-role="user"] {
  background: #fff0a8;
  color: #6b4a0c;
}

.admin-tools-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.admin-tools-header p {
  margin: 6px 0 0;
  color: #6d5f55;
  font-size: 0.84rem;
  font-weight: 700;
}

.admin-tools-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
  align-items: end;
}

.admin-tools label {
  display: grid;
  gap: 5px;
  color: #6d5f55;
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-tools select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(112, 86, 57, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #332d2a;
  font: inherit;
  font-size: 0.86rem;
}

.admin-tools button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe08b, #f7c650);
  color: #2f251c;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 4px 0 #d4a13d;
}

.admin-tools button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #d4a13d;
}

.reset-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

.reset-form button {
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #fff;
  background: #6e5d55;
  box-shadow: 0 5px 0 #4d403a;
}

.reset-form button:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #4d403a;
}

.reset-message {
  min-height: 1.3em;
  margin: 10px 0 0;
  color: #37613e;
  font-size: 0.9rem;
  font-weight: 800;
}

.reset-message.error {
  color: #8d312b;
}

.comments {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 9px;
  max-height: 470px;
  overflow: auto;
  border: 1px solid rgba(188, 143, 44, 0.24);
  border-radius: 8px;
  background: rgba(255, 253, 250, 0.78);
  box-shadow: inset 0 0 0 2px rgba(255, 232, 154, 0.18);
}

.comments li {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 8px;
  background: #fff8e9;
  border: 1px solid rgba(112, 86, 57, 0.12);
  overflow-wrap: anywhere;
}

.comments li strong {
  color: #53755b;
  font-size: 0.78rem;
}

.comments li span {
  color: #332d2a;
}

.ranking-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ranking-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}

.ranking-tab {
  min-height: 34px;
  border: 1px solid rgba(112, 86, 57, 0.14);
  border-radius: 8px;
  background: #fff8e9;
  color: #6d5f55;
  cursor: pointer;
  font-weight: 900;
}

.ranking-tab.active {
  background: #ffd766;
  color: #332d2a;
  box-shadow: 0 4px 0 #dc9f3e;
}

.ranking-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff8e9;
  border: 1px solid rgba(112, 86, 57, 0.12);
}

.ranking-list li::before {
  content: counter(list-item);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ffd766;
  font-weight: 900;
}

.ranking-list li.empty {
  justify-content: flex-start;
  color: #7f7168;
}

.ranking-list li.empty::before {
  display: none;
}

.memory-box {
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(112, 86, 57, 0.12);
  border-radius: 8px;
  background: #f5fbf4;
}

.memory-box > span {
  display: block;
  margin-bottom: 8px;
  color: #53755b;
  font-size: 0.78rem;
  font-weight: 900;
}

#rememberedSupporters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #6d5f55;
  font-weight: 700;
}

#rememberedSupporters span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9f6dc;
  color: #37613e;
}

.item-shop-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.item-shop-head p {
  margin: 6px 0 0;
  color: #6d5f55;
  font-size: 0.84rem;
  font-weight: 700;
}

#itemShopStatus {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ffe3e1;
  color: #8d312b;
  font-size: 0.72rem;
  font-weight: 900;
}

#itemShopStatus[data-ready="true"] {
  background: #e9f6dc;
  color: #37613e;
}

.shop-status-stack {
  display: grid;
  justify-items: end;
  gap: 6px;
}

#stoneBalance {
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2d214a, #7857d8 50%, #f2d778);
  color: #fff9d8;
  font-size: 0.78rem;
  box-shadow: 0 0 18px rgba(166, 131, 255, 0.28);
}

.stone-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.stone-pack-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(202, 177, 89, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 10%, rgba(238, 218, 122, 0.28), transparent 42%),
    linear-gradient(145deg, rgba(35, 27, 62, 0.95), rgba(77, 50, 113, 0.9));
  color: #fff9dc;
}

.stone-pack-card span {
  color: rgba(255, 249, 220, 0.76);
  font-size: 0.72rem;
  font-weight: 800;
}

.stone-pack-card button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffe083, #f5a94d);
  color: #35220c;
  box-shadow: 0 4px 0 rgba(117, 70, 20, 0.45);
  cursor: pointer;
  font-weight: 900;
}

.stone-pack-card button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.item-card {
  display: grid;
  gap: 8px;
  min-height: 178px;
  padding: 12px;
  border: 1px solid rgba(112, 86, 57, 0.14);
  border-radius: 8px;
  background: #fff8e9;
}

.item-card.group-専用 {
  border-color: rgba(188, 143, 44, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 248, 233, 0.96), rgba(255, 240, 168, 0.54)),
    #fff8e9;
}

.item-card-head,
.item-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.item-card-head span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e9f6dc;
  color: #37613e;
  font-size: 0.68rem;
  font-weight: 900;
}

.item-card-head strong {
  color: #8a4c20;
  font-size: 0.9rem;
}

.item-card h3 {
  margin: 0;
  font-size: 1rem;
}

.item-card p {
  margin: 0;
  color: #6d5f55;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.55;
}

.item-card small {
  color: #8a6930;
  font-size: 0.72rem;
  font-weight: 900;
}

.item-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #ffd766;
  box-shadow: 0 4px 0 #dc9f3e;
  cursor: pointer;
  font-weight: 900;
}

.item-actions button.use-item-button {
  background: #e9f6dc;
  color: #37613e;
  box-shadow: 0 4px 0 #b6d69d;
}

.item-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.item-shop-note,
.item-empty {
  margin: 12px 0 0;
  color: #7f7168;
  font-size: 0.78rem;
  font-weight: 800;
}

.catalog-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.catalog-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 68px;
  padding: 9px;
  border: 1px solid rgba(112, 86, 57, 0.14);
  border-radius: 8px;
  background: #fff8e9;
}

.catalog-card[data-discovered="false"] {
  background: rgba(255, 255, 255, 0.62);
  color: #93877c;
}

.catalog-icon {
  grid-row: span 2;
  width: 72px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff1a7, #ff9dd5 50%, #8bd5ff);
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 6px 14px rgba(80, 53, 34, 0.14);
}

.catalog-icon.form-unknown {
  display: grid;
  place-items: center;
  background: #e8dfd1;
}

.catalog-icon.form-unknown::before {
  content: "?";
  font-weight: 900;
}

.catalog-icon.form-stone {
  background: linear-gradient(145deg, #cdd5df, #8996a6 58%, #65707d);
}

.catalog-icon.form-fluffy,
.catalog-icon.form-fairy,
.catalog-icon.form-platinumFairy {
  background: linear-gradient(145deg, #fff7fb, #ffc4df 58%, #ffa5cb);
}

.catalog-icon.form-dog {
  background: linear-gradient(145deg, #ffe7b2, #f2a66c 58%, #d9825c);
}

.catalog-icon.form-luminous,
.catalog-icon.form-seraph,
.catalog-icon.form-celestialPrincess {
  background: linear-gradient(145deg, #fff0a8, #ffd1e0 58%, #eafaff);
}

.catalog-icon.form-nocturne,
.catalog-icon.form-dreamPlush,
.catalog-icon.form-deepJellyQueen,
.catalog-icon.form-moon,
.catalog-icon.form-moonQueen {
  background: linear-gradient(145deg, #51507f, #8072c4 58%, #c7d8ff);
}

.catalog-icon.form-prism,
.catalog-icon.form-dragon,
.catalog-icon.form-gearDragon,
.catalog-icon.form-auroraDragon,
.catalog-icon.form-genesisDragon,
.catalog-icon.form-edenNova {
  background: linear-gradient(145deg, #91e7cb, #ffaad4 50%, #ffe37a);
}

.catalog-icon.form-devil,
.catalog-icon.form-fallen,
.catalog-icon.form-abyssEmperor,
.catalog-icon.form-voidSeraph,
.catalog-icon.form-nullCrown,
.catalog-icon.form-gotNullState {
  background: linear-gradient(145deg, #281f3a, #7b45c9 58%, #e25ba8);
}

.catalog-icon.form-eden,
.catalog-icon.form-human,
.catalog-icon.form-goldenEden,
.catalog-icon.form-groveStag {
  background: linear-gradient(145deg, #9bd995, #ffe68b 58%, #ffb6d9);
}

.catalog-icon.form-oracle,
.catalog-icon.form-lampDjinn,
.catalog-icon.form-oracleNova,
.catalog-icon.form-mirrorEmpress,
.catalog-icon.form-platinumArk,
.catalog-icon.form-crystalFox,
.catalog-icon.form-melodyCat {
  background: linear-gradient(145deg, #f06476, #8bd18f 45%, #b995ff);
}

.catalog-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 900;
}

.catalog-card small {
  color: #7f7168;
  font-size: 0.68rem;
  font-weight: 800;
}

.catalog-card.rarity-rare {
  border-color: rgba(139, 90, 217, 0.35);
}

.catalog-card.rarity-legend {
  border-color: rgba(188, 143, 44, 0.42);
  background: linear-gradient(135deg, #fff8e9, #fff0b6);
}

.catalog-card.rarity-premium {
  border-color: rgba(122, 222, 199, 0.55);
  background: linear-gradient(135deg, #fff8e9, #eafff8 48%, #fff0fa);
}

.empty {
  color: #7f7168;
}

.pet.stage-2 {
  border-radius: 44% 44% 48% 48%;
  background: linear-gradient(150deg, #ffea9b, #ffb9cf 58%, #b995ff);
}

.pet.stage-2::before {
  left: 50%;
  top: 28px;
  width: 42px;
  height: 42px;
  border-radius: 48% 52% 56% 44%;
  background: #f06476;
  transform: translateX(-50%) rotate(-16deg);
  box-shadow:
    -50px 12px 0 #8b5ad9,
    50px 12px 0 #ffd45c;
}

.pet.stage-2::after {
  left: 82px;
  top: 20px;
  width: 20px;
  height: 42px;
  border-radius: 999px;
  background: #6ec577;
  transform: rotate(24deg);
}

.pet.stage-3 .ear {
  display: none;
}

.pet.form-devil {
  background: linear-gradient(150deg, #7444bd, #a85de6 58%, #313142);
  box-shadow:
    inset -15px -18px 0 rgba(35, 20, 49, 0.18),
    0 16px 0 rgba(77, 53, 41, 0.08);
}

.pet.form-devil::before,
.pet.form-devil::after {
  top: -18px;
  width: 42px;
  height: 54px;
  border-radius: 70% 30% 60% 30%;
  background: #2f2540;
}

.pet.form-devil::before {
  left: 30px;
  transform: rotate(-28deg);
}

.pet.form-devil::after {
  right: 30px;
  transform: rotate(28deg) scaleX(-1);
}

.pet.form-devil .eye,
.pet.form-devil .mouth {
  background: #ffe071;
  border-color: #ffe071;
}

.pet.form-angel {
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(150deg, #ffe6a8, #ffd0df 58%, #fff7f0);
}

.pet.form-angel::before {
  left: 50%;
  top: -34px;
  width: 84px;
  height: 24px;
  border: 7px solid #ffe071;
  border-radius: 999px;
  transform: translateX(-50%);
}

.pet.form-angel::after {
  left: -36px;
  top: 42px;
  width: 52px;
  height: 84px;
  border-radius: 70% 30% 70% 30%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 190px 0 0 rgba(255, 255, 255, 0.9);
}

.pet.form-eden {
  width: 190px;
  border-radius: 38% 38% 34% 34%;
  background:
    radial-gradient(circle at 36% 42%, #ffd6b5 0 29px, transparent 30px),
    radial-gradient(circle at 64% 42%, #ffd0ad 0 29px, transparent 30px),
    linear-gradient(150deg, #8bd18f, #f7d37d);
}

.pet.form-eden::before {
  left: 43px;
  top: 34px;
  width: 22px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: #6c4636;
  box-shadow: 76px 0 0 #6c4636;
}

.pet.form-eden::after {
  left: 50%;
  bottom: 32px;
  width: 72px;
  height: 34px;
  border-radius: 72px 72px 12px 12px;
  background: #77b56b;
  transform: translateX(-50%);
}

.pet.form-eden .eye.left {
  left: 50px;
}

.pet.form-eden .eye.right {
  right: 50px;
}

.pet.form-fallen {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 229, 116, 0.82) 0 18px, transparent 19px),
    linear-gradient(150deg, #5a438e, #c05ec6 58%, #2d2c48);
}

.pet.form-fallen::before,
.pet.form-fallen::after {
  top: -16px;
  width: 46px;
  height: 58px;
  border-radius: 70% 30% 60% 30%;
  background: #2f2540;
}

.pet.form-fallen::before {
  left: 26px;
  transform: rotate(-28deg);
}

.pet.form-fallen::after {
  right: 26px;
  transform: rotate(28deg) scaleX(-1);
}

.pet.form-seraph {
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 50% 13%, transparent 0 24px, #ffe071 25px 31px, transparent 32px),
    linear-gradient(150deg, #fff0b5, #ffd4e5 58%, #e9fbff);
  box-shadow:
    inset -15px -18px 0 rgba(255, 209, 120, 0.13),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 34px rgba(255, 225, 113, 0.55);
}

.pet.form-seraph::after {
  left: -38px;
  top: 44px;
  width: 56px;
  height: 88px;
  border-radius: 70% 30% 70% 30%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 198px 0 0 rgba(255, 255, 255, 0.92);
}

.pet.form-moon {
  background:
    radial-gradient(circle at 72% 24%, #ffeaa0 0 22px, transparent 23px),
    linear-gradient(150deg, #38446f, #7767b8 58%, #c2d6ff);
}

.pet.form-moon::before {
  left: 28px;
  top: -26px;
  width: 72px;
  height: 48px;
  border-radius: 999px 999px 16px 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 92px 18px 0 -12px rgba(255, 232, 160, 0.9);
}

.pet.form-moon::after {
  display: none;
}

.pet.form-oracle {
  background:
    radial-gradient(circle at 50% 18%, #f06476 0 22px, transparent 23px),
    linear-gradient(150deg, #8bd18f, #ffe08d 54%, #b995ff);
}

.pet.form-oracle::before {
  left: 50%;
  top: -22px;
  width: 34px;
  height: 70px;
  border-radius: 999px;
  background: #6ec577;
  transform: translateX(-50%) rotate(20deg);
}

.pet.form-oracle::after {
  left: 28px;
  bottom: 16px;
  width: 164px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.pet.form-dragon {
  border-radius: 48% 48% 38% 38%;
  background:
    radial-gradient(circle at 50% 70%, #fff2c7 0 34px, transparent 35px),
    linear-gradient(150deg, #64c7a2, #8aa6ff 54%, #ff9fd2);
}

.pet.form-dragon::before,
.pet.form-dragon::after {
  top: -22px;
  width: 54px;
  height: 54px;
  border-radius: 12px 42px 12px 42px;
  background: #ffe071;
}

.pet.form-dragon::before {
  left: 20px;
  transform: rotate(-28deg);
}

.pet.form-dragon::after {
  right: 20px;
  transform: rotate(28deg);
}

.pet.form-fairy {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.82) 0 20px, transparent 21px),
    linear-gradient(150deg, #baf4dc, #ffd0eb 58%, #fff0a8);
}

.pet.form-fairy::before {
  left: -38px;
  top: 38px;
  width: 76px;
  height: 102px;
  border-radius: 76% 24% 76% 24%;
  background: rgba(170, 231, 255, 0.74);
  box-shadow: 184px 0 0 rgba(255, 184, 225, 0.74);
}

.pet.form-fairy::after {
  left: 50%;
  top: -18px;
  width: 64px;
  height: 34px;
  border-radius: 999px;
  background: #ffdd73;
  transform: translateX(-50%);
}

.pet.form-human {
  width: 198px;
  border-radius: 38% 38% 34% 34%;
  background:
    radial-gradient(circle at 35% 42%, #ffd8b8 0 30px, transparent 31px),
    radial-gradient(circle at 65% 42%, #ffd0ad 0 30px, transparent 31px),
    linear-gradient(150deg, #9bd995, #ffe68b 58%, #ffb6d9);
}

.pet.form-human::before {
  left: 42px;
  top: 34px;
  width: 26px;
  height: 13px;
  border-radius: 999px 999px 0 0;
  background: #6c4636;
  box-shadow: 78px 0 0 #6c4636;
}

.pet.form-human::after {
  left: 50%;
  bottom: 26px;
  width: 80px;
  height: 38px;
  border-radius: 80px 80px 14px 14px;
  background: #80bf73;
  transform: translateX(-50%);
}

.pet.form-luminous {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 241, 153, 0.92) 0 28px, transparent 29px),
    linear-gradient(150deg, #fff0a8, #ffd1e0 58%, #eafaff);
  box-shadow:
    inset -15px -18px 0 rgba(255, 202, 104, 0.12),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 30px rgba(255, 224, 113, 0.48);
}

.pet.form-nocturne {
  background:
    radial-gradient(circle at 68% 22%, #ffeaa0 0 18px, transparent 19px),
    linear-gradient(150deg, #51507f, #8072c4 58%, #c7d8ff);
}

.pet.form-prism {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.74) 0 18px, transparent 19px),
    linear-gradient(145deg, #91e7cb, #ffaad4 50%, #ffe37a);
}

.pet.form-abyssEmperor {
  background:
    radial-gradient(circle at 50% 12%, #ffe071 0 20px, transparent 21px),
    linear-gradient(150deg, #281f3a, #7b45c9 52%, #e25ba8);
  box-shadow:
    inset -18px -20px 0 rgba(0, 0, 0, 0.18),
    0 18px 0 rgba(77, 53, 41, 0.08),
    0 0 44px rgba(125, 69, 198, 0.58);
}

.pet.form-abyssEmperor::before,
.pet.form-abyssEmperor::after {
  top: -28px;
  width: 62px;
  height: 78px;
  border-radius: 70% 30% 60% 30%;
  background: #21172f;
}

.pet.form-abyssEmperor::before {
  left: 18px;
  transform: rotate(-34deg);
}

.pet.form-abyssEmperor::after {
  right: 18px;
  transform: rotate(34deg) scaleX(-1);
}

.pet.form-celestialPrincess {
  background:
    radial-gradient(circle at 50% 8%, transparent 0 28px, #ffe071 29px 36px, transparent 37px),
    linear-gradient(150deg, #fff8d8, #ffcfe8 56%, #ffffff);
  box-shadow:
    inset -15px -18px 0 rgba(255, 209, 120, 0.12),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 44px rgba(255, 232, 154, 0.75);
}

.pet.form-goldenEden {
  background:
    radial-gradient(circle at 35% 42%, #ffd8b8 0 30px, transparent 31px),
    radial-gradient(circle at 65% 42%, #ffd0ad 0 30px, transparent 31px),
    linear-gradient(150deg, #fff0a8, #e6b23c 52%, #fff9d8);
  box-shadow:
    inset -15px -18px 0 rgba(120, 83, 20, 0.12),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 46px rgba(230, 178, 60, 0.62);
}

.pet.form-moonQueen {
  background:
    radial-gradient(circle at 50% 12%, #ffeaa0 0 26px, transparent 27px),
    linear-gradient(150deg, #33395f, #8c79d6 58%, #eef5ff);
  box-shadow:
    inset -15px -18px 0 rgba(38, 32, 85, 0.16),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 42px rgba(140, 121, 214, 0.52);
}

.pet.form-oracleNova {
  background:
    radial-gradient(circle at 50% 16%, #fff 0 14px, transparent 15px),
    linear-gradient(150deg, #f06476, #8bd18f 45%, #b995ff);
  box-shadow:
    inset -15px -18px 0 rgba(94, 66, 146, 0.12),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 48px rgba(255, 145, 215, 0.58);
}

.pet.form-auroraDragon {
  background:
    radial-gradient(circle at 50% 70%, #fff2c7 0 38px, transparent 39px),
    linear-gradient(145deg, #4bd0b0, #7ca2ff 42%, #ff8ec8 70%, #ffe071);
  box-shadow:
    inset -15px -18px 0 rgba(31, 97, 112, 0.13),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 50px rgba(122, 222, 199, 0.66);
}

.pet.form-platinumFairy {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9) 0 20px, transparent 21px),
    linear-gradient(150deg, #f5ffff, #ffc9ea 52%, #d9fff3);
  box-shadow:
    inset -15px -18px 0 rgba(190, 231, 224, 0.2),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 48px rgba(255, 255, 255, 0.95);
}

.pet.form-voidSeraph,
.pet.form-nullCrown,
.pet.form-gotNullState {
  background:
    radial-gradient(circle at 50% 10%, #ffe071 0 18px, transparent 19px),
    linear-gradient(150deg, #1f1a2e, #6e4bc7 52%, #ffe071);
  box-shadow:
    inset -18px -22px 0 rgba(0, 0, 0, 0.2),
    inset 12px 14px 0 rgba(255, 255, 255, 0.18),
    0 18px 0 rgba(77, 53, 41, 0.08),
    0 0 58px rgba(255, 224, 113, 0.72);
}

.pet.form-genesisDragon,
.pet.form-edenNova {
  background:
    radial-gradient(circle at 50% 70%, #fff2c7 0 40px, transparent 41px),
    linear-gradient(145deg, #4bd0b0, #7ca2ff 42%, #ff8ec8 70%, #ffe071);
  box-shadow:
    inset -15px -18px 0 rgba(31, 97, 112, 0.13),
    inset 12px 14px 0 rgba(255, 255, 255, 0.22),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 58px rgba(122, 222, 199, 0.72);
}

.pet.form-mirrorEmpress,
.pet.form-platinumArk {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.9) 0 18px, transparent 19px),
    linear-gradient(150deg, #f5ffff, #ffc9ea 52%, #b995ff);
  box-shadow:
    inset -15px -18px 0 rgba(190, 231, 224, 0.2),
    inset 12px 14px 0 rgba(255, 255, 255, 0.25),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 58px rgba(255, 255, 255, 0.95);
}

.pet.react-surprised .mouth {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #332d2a;
}

.pet.react-sparkle {
  filter: drop-shadow(0 0 16px rgba(255, 212, 92, 0.72));
}

.pet.react-sleepy .eye {
  height: 5px;
  margin-top: 8px;
}

.pet.react-cheer {
  animation: bob 0.7s ease-in-out infinite;
}

.pet.react-curious {
  transform: rotate(-5deg);
}

.pet.react-proud {
  filter: drop-shadow(0 8px 0 rgba(188, 143, 44, 0.18));
}

.pet.react-hungry .mouth {
  width: 32px;
  height: 24px;
  border-radius: 999px;
  background: #332d2a;
}

.pet.react-magic {
  filter: drop-shadow(0 0 20px rgba(185, 149, 255, 0.75));
}

.pet.react-dance {
  animation: bob 0.45s ease-in-out infinite;
}

.pet.react-legend {
  filter:
    drop-shadow(0 0 18px rgba(255, 224, 113, 0.7))
    drop-shadow(0 0 30px rgba(136, 196, 255, 0.35));
}

.pet.stage-1 {
  width: 180px;
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.9) 0 13px, transparent 14px),
    radial-gradient(circle at 68% 34%, rgba(255, 255, 255, 0.54) 0 10px, transparent 11px),
    linear-gradient(145deg, #fff1a7 0%, #ff9dd5 42%, #8bd5ff 74%, #b69cff 100%);
  box-shadow:
    inset -18px -22px 0 rgba(94, 66, 146, 0.14),
    0 18px 0 rgba(77, 53, 41, 0.08),
    0 0 42px rgba(255, 173, 217, 0.45);
}

.pet.stage-1 .ear,
.pet.stage-1 .eye,
.pet.stage-1 .mouth {
  display: none;
}

.pet.stage-1::before {
  left: -32px;
  top: 34px;
  width: 82px;
  height: 112px;
  border-radius: 80% 25% 76% 34%;
  background: linear-gradient(160deg, #7fd3ff, #c8a4ff 55%, #ff9dd5);
  transform: rotate(-24deg);
  box-shadow: 160px 12px 0 -3px #ffd86a;
  z-index: -1;
}

.pet.stage-1::after {
  left: 50%;
  bottom: 38px;
  width: 70px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  transform: translateX(-50%) rotate(-12deg);
}

.pet.stage-2 {
  border-radius: 46% 46% 42% 42%;
  box-shadow:
    inset -15px -18px 0 rgba(191, 97, 81, 0.13),
    0 16px 0 rgba(77, 53, 41, 0.08),
    0 0 30px rgba(255, 211, 102, 0.24);
}

.pet.form-stone {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5) 0 13px, transparent 14px),
    linear-gradient(145deg, #cdd5df, #8996a6 58%, #65707d);
}

.pet.form-stone::before,
.pet.form-stone::after {
  display: none;
}

.pet.form-stone .eye {
  top: 74px;
  background: #2d3440;
}

.pet.form-fluffy {
  border-radius: 48% 48% 38% 38%;
  background:
    radial-gradient(circle at 28% 18%, #ffe4f3 0 31px, transparent 32px),
    radial-gradient(circle at 72% 18%, #ffe4f3 0 31px, transparent 32px),
    linear-gradient(145deg, #fff7fb, #ffc4df 58%, #ffa5cb);
}

.pet.form-fluffy::before {
  left: -12px;
  top: 66px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ffe4f3;
  box-shadow:
    160px 0 0 #ffe4f3,
    20px 64px 0 #fff7fb,
    134px 64px 0 #fff7fb;
}

.pet.form-fluffy::after {
  display: none;
}

.pet.form-dog {
  border-radius: 46% 46% 40% 40%;
  background:
    radial-gradient(circle at 50% 66%, #fff8ee 0 43px, transparent 44px),
    linear-gradient(145deg, #ffe7b2, #f2a66c 58%, #d9825c);
}

.pet.form-dog::before,
.pet.form-dog::after {
  top: -14px;
  width: 58px;
  height: 78px;
  border-radius: 18px 42px 46px 46px;
  background: #c87558;
  z-index: -1;
}

.pet.form-dog::before {
  left: 4px;
  transform: rotate(-28deg);
}

.pet.form-dog::after {
  right: 4px;
  transform: rotate(28deg);
}

.pet.stage-3.form-fruit {
  border-radius: 44% 44% 48% 48%;
  background: linear-gradient(150deg, #ffea9b, #ffb9cf 58%, #b995ff);
}

.pet.stage-3.form-fruit::before {
  left: 50%;
  top: 28px;
  width: 42px;
  height: 42px;
  border-radius: 48% 52% 56% 44%;
  background: #f06476;
  transform: translateX(-50%) rotate(-16deg);
  box-shadow:
    -50px 12px 0 #8b5ad9,
    50px 12px 0 #ffd45c;
}

.pet.stage-3.form-fruit::after {
  left: 82px;
  top: 20px;
  width: 20px;
  height: 42px;
  border-radius: 999px;
  background: #6ec577;
  transform: rotate(24deg);
}

.pet.stage-3.form-fruit .ear,
.pet.stage-4 .ear {
  display: none;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes monsterBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025) translateY(-4px);
  }
}

@keyframes premiumMonsterMotion {
  0%,
  100% {
    transform: scale(1.01) translateY(0);
  }

  38% {
    transform: scale(1.07) translateY(-10px);
  }

  68% {
    transform: scale(1.035) translateY(3px);
  }
}

@keyframes stageSparkles {
  from {
    background-position: 0 0, 0 0, 0 0;
  }

  to {
    background-position: 110px -110px, -150px 150px, 180px -180px;
  }
}

@keyframes itemEventIn {
  from {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes itemAuraPulse {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

@keyframes itemSpin {
  from {
    transform: rotate(0deg) scale(0.98);
  }

  to {
    transform: rotate(360deg) scale(1.04);
  }
}

@keyframes premiumPetMotion {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: saturate(1.05);
  }
  50% {
    transform: translateY(-8px) scale(1.035);
    filter: saturate(1.28) brightness(1.06);
  }
}

@media (max-width: 980px) {
  .app-shell {
    min-height: auto;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .stage-action-rail {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .stage-action-rail .feed-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-item-drawer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 14px, 760px);
  }

  .pet-stage {
    height: 390px;
    min-height: 390px;
  }

  .stage-action-rail {
    position: absolute;
    left: 9px;
    right: auto;
    top: auto;
    bottom: 9px;
    width: min(128px, 34vw);
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: start;
  }

  .stage-action-rail .feed-actions {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(255, 252, 241, 0.62);
    backdrop-filter: blur(7px);
  }

  .stage-action-rail .feed-button {
    min-height: 28px;
    padding: 4px 5px;
    border-radius: 7px;
    font-size: 0.64rem;
    line-height: 1.15;
    box-shadow: 0 3px 0 rgba(80, 50, 35, 0.38);
  }

  .support-toggle {
    min-height: 30px;
    padding: 4px 7px;
    font-size: 0.62rem;
    box-shadow: 0 5px 14px rgba(28, 18, 52, 0.2);
  }

  .quick-item-drawer {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(330px, calc(100vw - 32px));
    max-height: 250px;
    z-index: 8;
  }

  .pet {
    width: 165px;
  }

  .egg-counts,
  .mood-counts,
  .fruit-counts {
    grid-template-columns: 1fr;
  }

  .auth-buttons,
  .guest-form,
  .comment-form,
  .reset-form,
  .active-users,
  .admin-tools-grid {
    grid-template-columns: 1fr;
  }
}