:root {
  --ink: #1b1230;
  --muted: #5a4d68;
  --paper: #ffe9c6;
  --cream: #fff4dd;
  --line: #c9a36a;
  --berry: #e11d48;
  --sun: #f4b000;
  --leaf: #059669;
  --sky: #2563eb;
  --grape: #6d28d9;
  --shadow: 0 16px 36px rgba(27, 18, 48, 0.18);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 12% 8%, #ffcf7a 0, transparent 28%),
    radial-gradient(circle at 90% 0%, #ff9ec8 0, transparent 26%),
    radial-gradient(circle at 80% 90%, #7de8c8 0, transparent 30%),
    var(--paper);
  color: var(--ink);
  font-family: "Nunito", sans-serif;
}

body {
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
.logo {
  font-family: "Fredoka", sans-serif;
}

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 48px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  line-height: 0;
}

.logo-img {
  display: block;
  height: 58px;
  width: auto;
  background: transparent;
}

.welcome-logo .logo-img {
  height: 92px;
}

.tag {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.chip,
.btn,
.icon-btn {
  border: 0;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chip:hover,
.btn:hover,
.icon-btn:hover {
  transform: translateY(-1px);
}

.btn {
  background: var(--ink);
  color: white;
  padding: 10px 16px;
  box-shadow: var(--shadow);
}

.btn.ghost {
  background: #fffdf8;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}

.btn.berry {
  background: var(--berry);
}

.btn.danger {
  background: #fffdf8;
  color: #9f1239;
  border: 2px solid #9f1239;
  box-shadow: none;
}

.btn.danger.solid {
  background: #9f1239;
  color: #fffdf8;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 8px 12px 8px 8px;
  border: 2px solid var(--line);
}

.me-pill {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hidden {
  display: none !important;
}

.card {
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.screen {
  animation: rise 0.35s ease;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.welcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
}

.welcome h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.95;
  margin: 0 0 12px;
}

.welcome p {
  color: var(--muted);
  font-size: 1.08rem;
}

.form-grid {
  display: grid;
  gap: 12px;
}

label {
  font-weight: 800;
  font-size: 0.86rem;
}

input[type="text"],
textarea,
select {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fffdf8;
  color: var(--ink);
}

textarea {
  min-height: 88px;
  resize: vertical;
}

.swatches,
.picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch,
.pick {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #eadcc8;
}

.swatch.active,
.pick.active {
  box-shadow: 0 0 0 3px var(--ink);
}

.pick {
  width: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cream);
}

.preview-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.7), transparent 40%),
    linear-gradient(#fff3c4, #c8f5e8);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  padding-top: 28px;
}

.preview-stage::after {
  content: "";
  position: absolute;
  inset: auto 12% 18% 12%;
  height: 28px;
  background: rgba(36, 24, 47, 0.08);
  border-radius: 50%;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.search {
  flex: 1;
  min-width: 220px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  background: #fffdf8;
  border: 2px solid var(--ink);
  padding: 7px 12px;
  font-weight: 800;
}

.chip.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

.plot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.plot-card {
  text-align: left;
  padding: 32px 14px 14px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.plot-card:hover {
  transform: translateY(-3px);
}

.plot-card .yours {
  position: absolute;
  top: 10px;
  left: 12px;
  background: var(--ink);
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e11d48;
  color: #fffdf8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}

.live-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #fffdf8;
  border-radius: 50%;
  animation: live-blink 1s ease-in-out infinite;
}

.plot-card .card-live {
  position: absolute;
  top: 10px;
  right: 42px;
}

.live-sign {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #e11d48;
  color: #fffdf8;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  z-index: 4;
  pointer-events: none;
}

.lesson-panel.on-air {
  border-color: #e11d48;
  background: #fff7f8;
}

.lesson-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.who-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.role-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid var(--ink);
}

.role-pill.owner {
  background: var(--sun);
  color: var(--ink);
}

.role-pill.admin {
  background: #d9d2ff;
  color: var(--ink);
}

.admin-picks {
  margin: 8px 0 12px;
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.plot-card .num {
  position: absolute;
  top: 10px;
  right: 12px;
  font-weight: 900;
  color: rgba(36, 24, 47, 0.28);
}

.plot-card .emoji {
  font-size: 2rem;
}

.plot-card h3 {
  margin: 8px 0 4px;
  font-size: 1.05rem;
}

.plot-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.empty-town {
  text-align: center;
  padding: 42px 24px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.empty-town h2 {
  margin: 0;
}

.empty-town p {
  margin: 0 0 8px;
  color: var(--muted);
  max-width: 420px;
}

.plot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 340px;
  gap: 16px;
}

.park {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-radius: 28px;
  border: 3px solid rgba(36, 24, 47, 0.08);
  cursor: pointer;
}

.park-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.tree {
  font-size: 2.2rem;
}

.little {
  position: absolute;
  transform: translate(-50%, -90%);
  transition: left 0.55s ease, top 0.55s ease;
  display: grid;
  justify-items: center;
  z-index: 2;
}

.little.you {
  z-index: 3;
}

.little .nameplate {
  background: white;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 4px;
  white-space: nowrap;
}

.avatar {
  width: 58px;
  height: 70px;
  position: relative;
  filter: drop-shadow(0 6px 0 rgba(36, 24, 47, 0.12));
}

.avatar.lg {
  width: 120px;
  height: 146px;
}

.avatar .body {
  position: absolute;
  inset: 18% 10% 8%;
  background: var(--skin);
  border-radius: 46% 46% 40% 40%;
  border: 3px solid var(--ink);
}

.avatar.lg .body {
  border-width: 5px;
}

.avatar .face {
  position: absolute;
  inset: 30% 18% 28%;
}

.avatar .eye {
  position: absolute;
  top: 18%;
  width: 8px;
  height: 10px;
  background: var(--ink);
  border-radius: 50%;
}

.avatar.lg .eye {
  width: 14px;
  height: 18px;
}

.avatar .eye.left { left: 16%; }
.avatar .eye.right { right: 16%; }
.avatar.happy .eye { height: 6px; border-radius: 8px 8px 2px 2px; }
.avatar.sleepy .eye { height: 3px; width: 10px; border-radius: 4px; }
.avatar.wink .eye.right { height: 3px; width: 10px; }

.avatar .blush {
  position: absolute;
  top: 46%;
  width: 8px;
  height: 5px;
  background: #ff8fa3;
  border-radius: 50%;
  opacity: 0.8;
}

.avatar .blush.left { left: 4%; }
.avatar .blush.right { right: 4%; }

.avatar .mouth {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 14px;
  height: 8px;
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  transform: translateX(-50%);
}

.avatar.lg .mouth {
  width: 26px;
  height: 14px;
  border-width: 4px;
}

.avatar.cool .mouth,
.avatar.smirk .mouth {
  width: 10px;
  height: 4px;
  border: 0;
  background: var(--ink);
  border-radius: 4px;
}

.avatar .hat,
.avatar .hat i {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.avatar .hat {
  left: 8%;
  right: 8%;
  top: 2%;
  height: 32%;
  z-index: 3;
  font-size: 0;
}

.avatar .hat i {
  border: 2.5px solid var(--ink);
}

.avatar.lg .hat i {
  border-width: 4px;
}

.avatar.mini-hat {
  width: 28px;
  height: 22px;
  filter: none;
}

.avatar.mini-hat .hat i {
  border-width: 2px;
}

.hat-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  min-height: 38px;
}

.hat-bow .hat i:nth-child(1),
.hat-bow .hat i:nth-child(2) {
  width: 40%;
  height: 62%;
  top: 18%;
  background: #ff6b9d;
  border-radius: 50%;
}

.hat-bow .hat i:nth-child(1) {
  left: 6%;
  transform: rotate(-32deg);
}

.hat-bow .hat i:nth-child(2) {
  right: 6%;
  transform: rotate(32deg);
}

.hat-bow .hat i:nth-child(3) {
  width: 22%;
  height: 36%;
  left: 39%;
  top: 32%;
  background: #e11d48;
  border-radius: 40%;
}

.hat-tophat .hat {
  top: -10%;
  height: 36%;
}

.hat-tophat .hat i:nth-child(1) {
  left: 22%;
  right: 22%;
  top: 0;
  height: 78%;
  background: #24182f;
  border-radius: 5px 5px 1px 1px;
}

.hat-tophat .hat i:nth-child(2) {
  left: 0;
  right: 0;
  bottom: 4%;
  height: 22%;
  background: #24182f;
  border-radius: 8px;
}

.hat-tophat .hat i:nth-child(3) {
  left: 22%;
  right: 22%;
  bottom: 22%;
  height: 16%;
  background: #e11d48;
  border-left: 0;
  border-right: 0;
}

.hat-headphones .hat {
  top: 4%;
  height: 42%;
  left: 4%;
  right: 4%;
}

.hat-headphones .hat i:nth-child(1) {
  left: 8%;
  right: 8%;
  top: 0;
  height: 70%;
  border-radius: 50% 50% 0 0;
  border-bottom: 0;
  background: transparent;
}

.hat-headphones .hat i:nth-child(2),
.hat-headphones .hat i:nth-child(3) {
  width: 22%;
  height: 48%;
  top: 42%;
  background: #6d28d9;
  border-radius: 40%;
}

.hat-headphones .hat i:nth-child(2) { left: 0; }
.hat-headphones .hat i:nth-child(3) { right: 0; }

.hat-crown .hat {
  top: 0;
  height: 30%;
}

.hat-crown .hat i:nth-child(1) {
  left: 2%;
  right: 2%;
  bottom: 0;
  height: 48%;
  background: #f4b000;
  border-radius: 4px;
}

.hat-crown .hat i:nth-child(2),
.hat-crown .hat i:nth-child(3) {
  width: 22%;
  height: 70%;
  bottom: 28%;
  background: #f4b000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 0;
  box-shadow: 0 0 0 2px var(--ink);
}

.hat-crown .hat i:nth-child(2) { left: 10%; }
.hat-crown .hat i:nth-child(3) { right: 10%; }

.hat-crown .hat::after {
  content: "";
  position: absolute;
  left: 39%;
  width: 22%;
  height: 86%;
  bottom: 28%;
  background: #f4b000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 0 2px var(--ink);
}

.hat-flower .hat {
  top: -4%;
  height: 30%;
}

.hat-flower .hat i:nth-child(1) {
  left: 28%;
  right: 28%;
  top: 8%;
  height: 70%;
  background: #ff8fa3;
  border-radius: 50%;
  box-shadow:
    -11px 6px 0 -1px #ff6b9d,
    11px 6px 0 -1px #ff6b9d,
    0 -10px 0 -1px #ff6b9d,
    -8px -6px 0 -2px #ffb3c6,
    8px -6px 0 -2px #ffb3c6;
}

.hat-flower .hat i:nth-child(2) {
  left: 40%;
  right: 40%;
  top: 28%;
  height: 34%;
  background: #f4b000;
  border-radius: 50%;
}

.hat-flower .hat i:nth-child(3) {
  display: none;
}

.hat-cap .hat {
  top: 4%;
  height: 28%;
}

.hat-cap .hat i:nth-child(1) {
  left: 10%;
  right: 10%;
  top: 8%;
  height: 78%;
  background: #2563eb;
  border-radius: 50% 50% 8px 8px;
}

.hat-cap .hat i:nth-child(2) {
  left: 38%;
  right: -4%;
  bottom: 2%;
  height: 28%;
  background: #1d4ed8;
  border-radius: 10px;
}

.hat-cap .hat i:nth-child(3) {
  width: 16%;
  height: 22%;
  left: 42%;
  top: 0;
  background: #93c5fd;
  border-radius: 50%;
}

.hat-star .hat i:nth-child(1) {
  left: 6%;
  right: 6%;
  bottom: 8%;
  height: 28%;
  background: #7b61ff;
  border-radius: 6px;
}

.hat-star .hat i:nth-child(2) {
  left: 30%;
  right: 30%;
  top: -8%;
  height: 86%;
  background: #f4b000;
  border: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 0 2px var(--ink));
}

.hat-star .hat i:nth-child(3) {
  display: none;
}

.hat-unicorn .hat {
  top: -8%;
  height: 34%;
}

.hat-unicorn .hat i:nth-child(1) {
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 36%;
  background: #f5d0fe;
  border-radius: 8px;
}

.hat-unicorn .hat i:nth-child(2) {
  left: 36%;
  width: 28%;
  bottom: 24%;
  height: 92%;
  background: linear-gradient(#fff 0 20%, #c4b5fd 20% 40%, #f9a8d4 40% 60%, #c4b5fd 60% 80%, #fff 80%);
  border-radius: 50% 50% 4px 4px;
  transform: rotate(-8deg);
}

.hat-unicorn .hat i:nth-child(3) {
  display: none;
}

.hat-cat .hat {
  top: -2%;
  height: 28%;
}

.hat-cat .hat i:nth-child(1) {
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 28%;
  background: #fb923c;
  border-radius: 6px;
}

.hat-cat .hat i:nth-child(2),
.hat-cat .hat i:nth-child(3) {
  width: 28%;
  height: 78%;
  bottom: 18%;
  background: #fb923c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hat-cat .hat i:nth-child(2) { left: 10%; }
.hat-cat .hat i:nth-child(3) { right: 10%; }

.hat-frog .hat {
  top: -4%;
  height: 30%;
}

.hat-frog .hat i:nth-child(1) {
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 55%;
  background: #22c55e;
  border-radius: 40% 40% 10px 10px;
}

.hat-frog .hat i:nth-child(2),
.hat-frog .hat i:nth-child(3) {
  width: 28%;
  height: 48%;
  top: 0;
  background: #4ade80;
  border-radius: 50%;
}

.hat-frog .hat i:nth-child(2) { left: 10%; }
.hat-frog .hat i:nth-child(3) { right: 10%; }

.hat-wizard .hat {
  top: -14%;
  height: 46%;
}

.hat-wizard .hat i:nth-child(1) {
  left: 16%;
  right: 16%;
  top: 0;
  height: 90%;
  background: #6d28d9;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 2.5px solid var(--ink);
}

.hat-wizard .hat i:nth-child(2) {
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: #5b21b6;
  border-radius: 8px;
}

.hat-wizard .hat i:nth-child(3) {
  left: 38%;
  width: 24%;
  height: 16%;
  top: 42%;
  background: #f4b000;
  border: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.hat-cowboy .hat {
  top: -6%;
  height: 32%;
}

.hat-cowboy .hat i:nth-child(1) {
  left: 18%;
  right: 18%;
  top: 4%;
  height: 62%;
  background: #92400e;
  border-radius: 40% 40% 8px 8px;
}

.hat-cowboy .hat i:nth-child(2) {
  left: -8%;
  right: -8%;
  bottom: 8%;
  height: 28%;
  background: #78350f;
  border-radius: 50%;
}

.hat-cowboy .hat i:nth-child(3) {
  left: 28%;
  right: 28%;
  bottom: 28%;
  height: 14%;
  background: #f4b000;
  border-left: 0;
  border-right: 0;
}

.hat-sun .hat {
  top: -4%;
  height: 30%;
}

.hat-sun .hat i:nth-child(1) {
  left: 16%;
  right: 16%;
  top: 0;
  height: 58%;
  background: #fbbf24;
  border-radius: 50% 50% 8px 8px;
}

.hat-sun .hat i:nth-child(2) {
  left: -10%;
  right: -10%;
  bottom: 6%;
  height: 32%;
  background: #f59e0b;
  border-radius: 40%;
}

.hat-sun .hat i:nth-child(3) {
  display: none;
}

.hat-bolt .hat {
  top: -10%;
  height: 36%;
}

.hat-bolt .hat i:nth-child(1) {
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 38%;
  background: #1e293b;
  border-radius: 8px;
}

.hat-bolt .hat i:nth-child(2) {
  left: 28%;
  width: 44%;
  bottom: 28%;
  height: 90%;
  background: #facc15;
  clip-path: polygon(35% 0, 80% 0, 55% 42%, 88% 42%, 18% 100%, 40% 52%, 12% 52%);
}

.hat-bolt .hat i:nth-child(3) {
  display: none;
}

.hat-ninja .hat {
  top: 2%;
  height: 22%;
  left: 8%;
  right: 8%;
}

.hat-ninja .hat i:nth-child(1) {
  left: 0;
  right: 0;
  top: 18%;
  height: 64%;
  background: #111827;
  border-radius: 10px 10px 4px 4px;
}

.hat-ninja .hat i:nth-child(2) {
  left: 36%;
  right: 8%;
  top: 36%;
  height: 22%;
  background: #e11d48;
  border: 0;
}

.hat-ninja .hat i:nth-child(3) {
  display: none;
}

.hat-rocket .hat {
  top: -10%;
  height: 38%;
}

.hat-rocket .hat i:nth-child(1) {
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 70%;
  background: #cbd5e1;
  border-radius: 50% 50% 12px 12px;
}

.hat-rocket .hat i:nth-child(2) {
  left: 30%;
  right: 30%;
  top: 0;
  height: 42%;
  background: #e11d48;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 0;
  box-shadow: 0 0 0 2px var(--ink);
}

.hat-rocket .hat i:nth-child(3) {
  left: 38%;
  right: 38%;
  bottom: 18%;
  height: 28%;
  background: #38bdf8;
  border-radius: 50%;
}

.hat-ice .hat {
  top: -4%;
  height: 30%;
}

.hat-ice .hat i:nth-child(1) {
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 40%;
  background: #7dd3fc;
  border-radius: 4px;
}

.hat-ice .hat i:nth-child(2),
.hat-ice .hat i:nth-child(3) {
  width: 20%;
  height: 78%;
  bottom: 26%;
  background: #e0f2fe;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hat-ice .hat i:nth-child(2) { left: 12%; }
.hat-ice .hat i:nth-child(3) { right: 12%; }

.hat-ice .hat::after {
  content: "";
  position: absolute;
  left: 38%;
  width: 24%;
  height: 92%;
  bottom: 26%;
  background: #bae6fd;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 0 2px var(--ink);
}

.hat-dino .hat {
  top: -6%;
  height: 32%;
}

.hat-dino .hat i:nth-child(1) {
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 48%;
  background: #16a34a;
  border-radius: 10px 10px 6px 6px;
}

.hat-dino .hat i:nth-child(2),
.hat-dino .hat i:nth-child(3) {
  width: 18%;
  height: 56%;
  bottom: 36%;
  background: #22c55e;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hat-dino .hat i:nth-child(2) { left: 18%; }
.hat-dino .hat i:nth-child(3) { left: 41%; }

.hat-dino .hat::after {
  content: "";
  position: absolute;
  right: 16%;
  width: 18%;
  height: 56%;
  bottom: 36%;
  background: #22c55e;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 0 2px var(--ink);
}

.hat-ufo .hat {
  top: -8%;
  height: 32%;
}

.hat-ufo .hat i:nth-child(1) {
  left: 22%;
  right: 22%;
  top: 0;
  height: 58%;
  background: #86efac;
  border-radius: 50% 50% 8px 8px;
}

.hat-ufo .hat i:nth-child(2) {
  left: -6%;
  right: -6%;
  bottom: 8%;
  height: 42%;
  background: #64748b;
  border-radius: 50%;
}

.hat-ufo .hat i:nth-child(3) {
  left: 40%;
  right: 40%;
  bottom: 18%;
  height: 18%;
  background: #facc15;
  border-radius: 50%;
}

.hat-dragon .hat {
  top: -6%;
  height: 32%;
}

.hat-dragon .hat i:nth-child(1) {
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 40%;
  background: #b91c1c;
  border-radius: 5px;
}

.hat-dragon .hat i:nth-child(2),
.hat-dragon .hat i:nth-child(3) {
  width: 24%;
  height: 84%;
  bottom: 24%;
  background: #dc2626;
  clip-path: polygon(50% 0, 100% 70%, 70% 70%, 70% 100%, 30% 100%, 30% 70%, 0 70%);
}

.hat-dragon .hat i:nth-child(2) { left: 8%; }
.hat-dragon .hat i:nth-child(3) { right: 8%; }

.hat-gem .hat {
  top: -6%;
  height: 32%;
}

.hat-gem .hat i:nth-child(1) {
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 38%;
  background: #e2e8f0;
  border-radius: 5px;
}

.hat-gem .hat i:nth-child(2) {
  left: 32%;
  right: 32%;
  top: -4%;
  height: 78%;
  background: #38bdf8;
  clip-path: polygon(50% 0, 100% 40%, 80% 100%, 20% 100%, 0 40%);
}

.hat-gem .hat i:nth-child(3) {
  left: 12%;
  width: 16%;
  height: 28%;
  bottom: 28%;
  background: #e11d48;
  border-radius: 50%;
}


.avatar .cape {
  display: none;
  position: absolute;
  left: 16%;
  right: 16%;
  top: 56%;
  bottom: 2%;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 18% 18% 42% 42%;
  z-index: 0;
}

.avatar .body {
  z-index: 1;
}

.avatar .fit {
  position: absolute;
  inset: 18% 10% 8%;
  border-radius: 46% 46% 40% 40%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 56%, #000 64%);
  mask-image: linear-gradient(transparent 56%, #000 64%);
}

.avatar .face {
  z-index: 3;
}

.avatar.lg .cape,
.avatar.lg .fit::before,
.avatar.lg .fit::after {
  border-width: 4px;
}

.outfit-hoodie .fit {
  background: linear-gradient(transparent 62%, #6d28d9 62%);
}

.outfit-hoodie .fit::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 72%;
  height: 16%;
  background: #5b21b6;
  border: 3px solid var(--ink);
  border-radius: 14px;
}

.outfit-hoodie .fit::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  top: 58%;
  height: 10%;
  border: 3px solid var(--ink);
  border-radius: 0 0 16px 16px;
  background: #5b21b6;
}

.outfit-dress .fit {
  background: linear-gradient(transparent 62%, #e11d48 62%);
}

.outfit-dress .fit::after {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -6%;
  height: 42%;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 20% 20% 46% 46%;
}

.outfit-overalls .fit {
  background: linear-gradient(transparent 64%, #3a86ff 64%);
}

.outfit-overalls .fit::before {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  top: 52%;
  height: 18%;
  background: #3a86ff;
  border: 3px solid var(--ink);
  border-radius: 10px 10px 4px 4px;
}

.outfit-overalls .fit::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  height: 8px;
  background: #f4a261;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-tee .fit {
  background: linear-gradient(transparent 62%, #2563eb 62% 86%, transparent 86%);
}

.outfit-tee .fit::before {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  top: 58%;
  height: 8px;
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-scarf .fit::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 60%;
  height: 11px;
  background: repeating-linear-gradient(90deg, #e11d48 0 8px, #fffdf8 8px 14px);
  border: 3px solid var(--ink);
  border-radius: 10px;
}

.outfit-scarf .fit::after {
  content: "";
  position: absolute;
  right: 14%;
  top: 68%;
  width: 10px;
  height: 20%;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-cape .cape {
  display: block;
}

.outfit-pjs .fit {
  background: repeating-linear-gradient(
    180deg,
    #a7f3d0 0 7px,
    #d8b4fe 7px 14px
  );
  -webkit-mask-image: linear-gradient(transparent 60%, #000 66%);
  mask-image: linear-gradient(transparent 60%, #000 66%);
}

.outfit-pjs .fit::before {
  display: none;
}

.outfit-pjs .fit::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  color: #6d28d9;
}

.avatar.lg.outfit-pjs .fit::after {
  font-size: 1.35rem;
}

.outfit-raincoat .fit {
  background: linear-gradient(transparent 62%, #f4b000 62%);
}

.outfit-raincoat .fit::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 58%;
  height: 10%;
  background: #118ab2;
  border: 3px solid var(--ink);
  border-radius: 0 0 12px 12px;
}

.outfit-raincoat .fit::after {
  content: "";
  position: absolute;
  left: 8%;
  width: 14%;
  top: 70%;
  height: 18%;
  background: #f4b000;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-sweater .fit {
  background: repeating-linear-gradient(
    180deg,
    #ef476f 0 8px,
    #ff8fa3 8px 16px
  );
  -webkit-mask-image: linear-gradient(transparent 60%, #000 66%);
  mask-image: linear-gradient(transparent 60%, #000 66%);
}

.outfit-sweater .fit::before {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  top: 58%;
  height: 8px;
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-vest .fit {
  background: linear-gradient(transparent 62%, #2a9d8f 62%);
}

.outfit-vest .fit::before {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  top: 62%;
  bottom: 8%;
  background: var(--skin);
  border: 3px solid var(--ink);
  border-radius: 0 0 16px 16px;
}

.outfit-tuxedo .fit {
  background: linear-gradient(transparent 62%, #1b1230 62%);
}

.outfit-tuxedo .fit::before {
  content: "";
  position: absolute;
  left: 36%;
  right: 36%;
  top: 62%;
  bottom: 10%;
  background: #fffdf8;
  border: 3px solid var(--ink);
}

.outfit-tuxedo .fit::after {
  content: "";
  position: absolute;
  left: 42%;
  right: 42%;
  top: 58%;
  height: 10px;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 6px;
}

.outfit-astronaut .fit {
  background: linear-gradient(transparent 62%, #cfd8e3 62%);
}

.outfit-astronaut .fit::before {
  content: "";
  position: absolute;
  left: 36%;
  right: 36%;
  top: 70%;
  height: 16%;
  background: #3a86ff;
  border: 3px solid var(--ink);
  border-radius: 10px;
}

.outfit-astronaut .fit::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  top: 58%;
  height: 8px;
  background: #ffd166;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-bee .fit {
  background: repeating-linear-gradient(
    180deg,
    #ffd166 0 8px,
    #1b1230 8px 16px
  );
  -webkit-mask-image: linear-gradient(transparent 60%, #000 66%);
  mask-image: linear-gradient(transparent 60%, #000 66%);
}

.outfit-bee .fit::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 72%;
  height: 10%;
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: 10px;
  opacity: 0.9;
}

.outfit-apron .fit {
  background: linear-gradient(transparent 62%, #fffdf8 62%);
}

.outfit-apron .fit::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 62%;
  bottom: 4%;
  background: #ef476f;
  border: 3px solid var(--ink);
  border-radius: 8px 8px 22px 22px;
}

.outfit-apron .fit::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 58%;
  height: 8px;
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-varsity .fit {
  background: linear-gradient(transparent 62%, #e11d48 62%);
}

.outfit-varsity .fit::before {
  content: "";
  position: absolute;
  left: 0;
  width: 22%;
  top: 62%;
  bottom: 8%;
  background: #1b1230;
  border: 3px solid var(--ink);
}

.outfit-varsity .fit::after {
  content: "L";
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translate(-50%, -50%);
  font-family: "Fredoka", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd166;
}

.avatar.lg.outfit-varsity .fit::after {
  font-size: 1.4rem;
}

.outfit-cowboy .fit {
  background: linear-gradient(transparent 62%, #92400e 62%);
}

.outfit-cowboy .fit::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 78%;
  height: 12%;
  background: #f4b000;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-cowboy .fit::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 58%;
  height: 10px;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 10px;
}

.outfit-pirate .fit {
  background: repeating-linear-gradient(
    180deg,
    #fffdf8 0 7px,
    #1b1230 7px 14px
  );
  -webkit-mask-image: linear-gradient(transparent 60%, #000 66%);
  mask-image: linear-gradient(transparent 60%, #000 66%);
}

.outfit-pirate .fit::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 76%;
  height: 12%;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-sailor .fit {
  background: linear-gradient(transparent 62%, #1d4ed8 62%);
}

.outfit-sailor .fit::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 58%;
  height: 16%;
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: 0 0 42% 42%;
}

.outfit-sailor .fit::after {
  content: "";
  position: absolute;
  left: 38%;
  right: 38%;
  top: 68%;
  height: 10px;
  background: #e11d48;
  border: 3px solid var(--ink);
  border-radius: 6px;
}

.outfit-knight .fit {
  background: linear-gradient(transparent 62%, #cfd8e3 62%);
}

.outfit-knight .fit::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 78%;
  height: 10%;
  background: #f4b000;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-knight .fit::after {
  content: "";
  position: absolute;
  left: 42%;
  width: 16%;
  top: 62%;
  height: 18%;
  background: #f4b000;
  border: 3px solid var(--ink);
  box-shadow: 10px 8px 0 -2px #f4b000, -10px 8px 0 -2px #f4b000;
}

.outfit-soccer .fit {
  background: linear-gradient(transparent 62%, #2a9d8f 62% 78%, #fffdf8 78% 86%, #2a9d8f 86%);
}

.outfit-soccer .fit::after {
  content: "7";
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  font-family: "Fredoka", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fffdf8;
}

.avatar.lg.outfit-soccer .fit::after {
  font-size: 1.4rem;
}

.outfit-wizard .fit {
  background: linear-gradient(transparent 62%, #6d28d9 62%);
}

.outfit-wizard .fit::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 58%;
  height: 8px;
  background: #f4b000;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

.outfit-wizard .fit::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  color: #ffd166;
}

.avatar.lg.outfit-wizard .fit::after {
  font-size: 1.35rem;
}

.outfit-super .cape {
  display: block;
  background: #3a86ff;
}

.outfit-super .fit {
  background: linear-gradient(transparent 62%, #e11d48 62%);
}

.outfit-super .fit::after {
  content: "★";
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  color: #ffd166;
}

.avatar.lg.outfit-super .fit::after {
  font-size: 1.4rem;
}

.side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.panel {
  padding: 16px;
}

.panel h3 {
  margin: 0 0 10px;
}

.who,
.group-list,
.msg-list {
  display: grid;
  gap: 8px;
}

.who-row,
.group-item,
.msg {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  background: var(--cream);
}

.group-item {
  align-items: flex-start;
  justify-content: space-between;
}

.group-item button {
  flex-shrink: 0;
}

.msg {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.msg strong {
  font-size: 0.82rem;
}

.msg.bot {
  background: #e8f8f0;
  border: 2px solid #059669;
}

.msg.bot.warn {
  background: #fff3c4;
  border-color: #f4b000;
}

.msg.bot.ban {
  background: #ffe4e6;
  border-color: #e11d48;
}

.ban-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffe4e6;
  border: 2px solid #e11d48;
  font-weight: 800;
  color: #9f1239;
}

.compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
}

.stat {
  background: white;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 800;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.flash {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--ink);
  color: #fffdf8;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow);
  animation: rise 0.35s ease;
  white-space: nowrap;
}

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(36, 24, 47, 0.38);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 80;
}

.modal {
  width: min(520px, 100%);
  padding: 20px;
}

.portal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(27, 18, 48, 0.28);
  pointer-events: none;
}

.portal[hidden] {
  display: none;
}

.portal.play {
  pointer-events: all;
}

.portal-stage {
  position: relative;
  width: min(220px, 56vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.portal-well {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #fff8 0 12%, var(--portal-ground) 28%, var(--portal) 62%, #1b1230 100%);
  box-shadow:
    0 0 0 10px rgba(255, 253, 248, 0.45),
    0 0 48px var(--portal);
}

.portal.play .portal-stage {
  animation: portal-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.portal.open .portal-stage {
  animation: portal-out 0.4s ease-in forwards;
}

.portal.play .portal-well {
  animation: portal-spin 0.7s linear;
}

.portal.open {
  background: transparent;
  transition: background 0.35s ease;
}

.portal-ring {
  position: absolute;
  inset: -14px;
  border: 4px dashed rgba(255, 253, 248, 0.85);
  border-radius: 50%;
  animation: portal-spin 0.7s linear;
}

.portal-ring.two {
  inset: -28px;
  border-width: 3px;
  animation-duration: 0.55s;
  animation-direction: reverse;
}

.portal-emoji {
  position: relative;
  z-index: 1;
  font-size: 3.4rem;
  filter: drop-shadow(0 6px 0 rgba(27, 18, 48, 0.2));
  animation: portal-pop 0.42s ease;
}

@keyframes portal-in {
  from {
    transform: scale(0.12);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes portal-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(16);
    opacity: 0;
  }
}

@keyframes portal-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes portal-pop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .portal,
  .portal-well,
  .portal-ring,
  .portal-emoji {
    animation: none !important;
    transition: none !important;
  }
}

.modal h2 {
  margin-top: 0;
}

.empty {
  color: var(--muted);
  font-style: italic;
}

.join-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0 0 14px;
}

.join-code-big {
  font-family: "Fredoka", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 12px;
}

.qr {
  display: block;
  width: 160px;
  height: 160px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 8px;
  margin: 0 0 12px;
}

.qr.lg {
  width: 200px;
  height: 200px;
}

.phygital-panel {
  background: linear-gradient(#fffdf8, #e8f4ff);
}

.irl-pill,
.card-irl {
  background: #118ab2;
  color: white;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.plot-card .card-irl {
  position: absolute;
  top: 36px;
  right: 12px;
}

.role-pill.irl {
  background: #c5ebf6;
  color: #0b4f66;
}

.irl-note {
  margin: 0 0 10px;
  font-weight: 800;
}

.irl-sign {
  top: 18px;
  left: 16px;
  font-size: 0.9rem;
  background: #fffdf8;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.print-poster {
  text-align: center;
}

.poster-emoji {
  font-size: 3.4rem;
}

@media print {
  body {
    background: white;
  }

  .app,
  .portal,
  .flash,
  .no-print,
  .topbar {
    display: none !important;
  }

  .modal-back {
    position: static;
    background: none;
    padding: 0;
    display: block;
  }

  .print-poster {
    box-shadow: none;
    border: 0;
    width: 100%;
  }
}

.quest-banner {
  margin: 0 0 16px;
  padding: 16px 20px;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 20%, #ffcf7a 0, transparent 36%),
    radial-gradient(circle at 88% 10%, #ff9ec8 0, transparent 32%),
    #fffdf8;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.quest-card h3 {
  margin: 6px 0 4px;
}

.quest-card.done {
  background: #e8f8f0;
  border-color: #059669;
}

.quest-emoji {
  font-size: 2rem;
}

.reward-shelf {
  margin-bottom: 16px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff3c4;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}

.reward-pop {
  text-align: center;
}

.toolbar:has(.shop-you) {
  align-items: end;
  padding-top: 72px;
  min-height: 280px;
}

.shop-you {
  display: grid;
  place-items: center;
  min-width: 220px;
  min-height: 230px;
  margin-left: auto;
  overflow: visible;
}

.shop-card {
  text-align: center;
}

.shop-card.wearing {
  background: #fff3c4;
}

.shop-card.owned:not(.wearing) {
  background: #e8f8f0;
}

.shop-card-warp {
  background: radial-gradient(circle at 50% 28%, #3b1d8f 0%, #12082a 62%);
  color: #f5f3ff;
  border-color: #c4b5fd;
}

.shop-card-warp .tag {
  color: #ddd6fe;
}

.shop-card-warp.wearing,
.shop-card-warp.owned:not(.wearing) {
  background: radial-gradient(circle at 50% 28%, #4c1d95 0%, #1a0b36 62%);
}

.shop-card-angel {
  background:
    radial-gradient(circle at 50% 0%, #fff 0 6%, rgba(255, 255, 255, 0.55) 16%, transparent 34%),
    radial-gradient(circle at 50% 18%, #eef6ff 0%, #163a7a 38%, #07122b 72%);
  color: #f8fbff;
  border-color: #fff;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.55),
    0 0 42px rgba(125, 211, 252, 0.45);
  overflow: visible;
}

.shop-card-angel .tag {
  color: #e0f2fe;
}

.shop-card-angel.wearing,
.shop-card-angel.owned:not(.wearing) {
  background: radial-gradient(circle at 50% 18%, #eef6ff 0%, #1d4ed8 38%, #0b1b3a 72%);
}

.shop-preview {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding-top: 16px;
}

.shop-card-angel .shop-preview {
  min-height: 168px;
  padding-top: 52px;
  padding-bottom: 22px;
}

.shop-you .avatar.aura-angel {
  margin-top: 42px;
}

.closet-row .pick {
  min-width: 44px;
}

.avatar {
  overflow: visible;
}

.avatar .aura-ring,
.avatar .aura-orbit,
.avatar .aura-beam,
.avatar .aura-crown,
.avatar .aura-wings,
.avatar .aura-mist,
.avatar .aura-bits {
  display: none;
  position: absolute;
  pointer-events: none;
}

.avatar .aura-ring {
  inset: -18% -14% -6%;
  border-radius: 50%;
  z-index: 0;
}

.avatar .aura-orbit {
  inset: -32% -26% -14%;
  z-index: 0;
}

.avatar .aura-bits {
  inset: -22% -18% -2%;
  z-index: 4;
}

.avatar[class*="aura-"] .aura-ring,
.avatar[class*="aura-"] .aura-bits {
  display: block;
}

.avatar.aura-warp .aura-orbit,
.avatar.aura-angel .aura-orbit,
.avatar.aura-angel .aura-beam,
.avatar.aura-angel .aura-crown,
.avatar.aura-angel .aura-wings,
.avatar.aura-angel .aura-mist {
  display: block;
}

.avatar.aura-pink .aura-ring {
  background: radial-gradient(circle, rgba(255, 130, 170, 0.45), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(255, 120, 170, 0.35);
  animation: aura-pulse 1.8s ease-in-out infinite;
}

.avatar.aura-blue .aura-ring {
  background: radial-gradient(circle, rgba(90, 180, 255, 0.45), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(80, 170, 255, 0.35);
  animation: aura-pulse 1.8s ease-in-out infinite;
}

.avatar.aura-mint .aura-ring {
  background: radial-gradient(circle, rgba(90, 230, 180, 0.45), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(70, 210, 160, 0.35);
  animation: aura-pulse 1.8s ease-in-out infinite;
}

.avatar.aura-sparkle .aura-ring {
  background: radial-gradient(circle, rgba(255, 220, 80, 0.4), transparent 70%);
  box-shadow: 0 0 20px 7px rgba(255, 210, 70, 0.4);
  animation: aura-pulse 1.4s ease-in-out infinite;
}

.avatar.aura-sparkle .aura-bits::before,
.avatar.aura-sparkle .aura-bits::after {
  content: "✨";
  position: absolute;
  font-size: 0.7rem;
  animation: aura-float 2.2s ease-in-out infinite;
}

.avatar.aura-sparkle .aura-bits::before { left: 4%; top: 8%; }
.avatar.aura-sparkle .aura-bits::after { right: 2%; bottom: 18%; animation-delay: -1s; }

.avatar.aura-heart .aura-ring {
  background: radial-gradient(circle, rgba(255, 90, 140, 0.4), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(255, 80, 130, 0.35);
  animation: aura-pulse 1.6s ease-in-out infinite;
}

.avatar.aura-heart .aura-bits::before,
.avatar.aura-heart .aura-bits::after {
  content: "💗";
  position: absolute;
  font-size: 0.65rem;
  animation: aura-float 2s ease-in-out infinite;
}

.avatar.aura-heart .aura-bits::before { left: 0; top: 12%; }
.avatar.aura-heart .aura-bits::after { right: 0; top: 28%; animation-delay: -0.8s; }

.avatar.aura-thunder .aura-ring {
  background: radial-gradient(circle, rgba(255, 230, 80, 0.4), transparent 68%);
  box-shadow: 0 0 16px 5px rgba(180, 140, 255, 0.4);
  animation: aura-flash 0.9s ease-in-out infinite;
}

.avatar.aura-thunder .aura-bits::before {
  content: "⚡";
  position: absolute;
  right: 0;
  top: 6%;
  font-size: 0.75rem;
  animation: aura-float 1.4s ease-in-out infinite;
}

.avatar.aura-fire .aura-ring {
  background: radial-gradient(circle, rgba(255, 120, 40, 0.45), transparent 70%);
  box-shadow: 0 0 20px 7px rgba(255, 90, 20, 0.4);
  animation: aura-pulse 1.1s ease-in-out infinite;
}

.avatar.aura-fire .aura-bits::before,
.avatar.aura-fire .aura-bits::after {
  content: "🔥";
  position: absolute;
  font-size: 0.62rem;
  animation: aura-float 1.5s ease-in-out infinite;
}

.avatar.aura-fire .aura-bits::before { left: 2%; bottom: 10%; }
.avatar.aura-fire .aura-bits::after { right: 4%; top: 10%; animation-delay: -0.6s; }

.avatar.aura-ice .aura-ring {
  background: radial-gradient(circle, rgba(160, 230, 255, 0.5), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(140, 220, 255, 0.45);
  animation: aura-pulse 2s ease-in-out infinite;
}

.avatar.aura-ice .aura-bits::before {
  content: "❄️";
  position: absolute;
  left: 6%;
  top: 4%;
  font-size: 0.7rem;
  animation: aura-float 2.4s ease-in-out infinite;
}

.avatar.aura-rainbow .aura-ring {
  background: conic-gradient(#ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b);
  opacity: 0.42;
  filter: blur(1px);
  animation: aura-spin 4s linear infinite;
}

.avatar.aura-galaxy .aura-ring {
  background: radial-gradient(circle, rgba(130, 90, 255, 0.5), rgba(20, 10, 50, 0.15) 70%);
  box-shadow: 0 0 22px 8px rgba(110, 70, 220, 0.4);
  animation: aura-pulse 2.2s ease-in-out infinite;
}

.avatar.aura-galaxy .aura-bits::before,
.avatar.aura-galaxy .aura-bits::after {
  content: "⭐";
  position: absolute;
  font-size: 0.6rem;
  animation: aura-float 2.6s ease-in-out infinite;
}

.avatar.aura-galaxy .aura-bits::before { left: 0; top: 6%; }
.avatar.aura-galaxy .aura-bits::after { content: "🌙"; right: 0; bottom: 12%; animation-delay: -1.2s; }

.avatar.aura-gold .aura-ring {
  background: radial-gradient(circle, rgba(250, 204, 21, 0.5), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(234, 179, 8, 0.4);
  animation: aura-pulse 1.7s ease-in-out infinite;
}

.avatar.aura-purple .aura-ring {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.5), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(139, 92, 246, 0.4);
  animation: aura-pulse 1.7s ease-in-out infinite;
}

.avatar.aura-orange .aura-ring {
  background: radial-gradient(circle, rgba(251, 146, 60, 0.5), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(249, 115, 22, 0.4);
  animation: aura-pulse 1.7s ease-in-out infinite;
}

.avatar.aura-cloud .aura-ring {
  background: radial-gradient(circle, rgba(241, 245, 249, 0.7), transparent 72%);
  box-shadow: 0 0 16px 8px rgba(226, 232, 240, 0.55);
  animation: aura-pulse 2.4s ease-in-out infinite;
}

.avatar.aura-cloud .aura-bits::before,
.avatar.aura-cloud .aura-bits::after {
  content: "☁";
  position: absolute;
  font-size: 0.7rem;
  opacity: 0.8;
  animation: aura-float 2.8s ease-in-out infinite;
}

.avatar.aura-cloud .aura-bits::before { left: 0; top: 8%; }
.avatar.aura-cloud .aura-bits::after { right: 0; bottom: 16%; animation-delay: -1.3s; }

.avatar.aura-honey .aura-ring {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(217, 119, 6, 0.38);
  animation: aura-pulse 2s ease-in-out infinite;
}

.avatar.aura-honey .aura-bits::before {
  content: "🍯";
  position: absolute;
  right: 2%;
  top: 10%;
  font-size: 0.62rem;
  animation: aura-float 2.2s ease-in-out infinite;
}

.avatar.aura-bubble .aura-ring {
  background: radial-gradient(circle, rgba(186, 230, 253, 0.45), transparent 70%);
  box-shadow: 0 0 16px 6px rgba(125, 211, 252, 0.4);
  animation: aura-pulse 1.9s ease-in-out infinite;
}

.avatar.aura-bubble .aura-bits::before,
.avatar.aura-bubble .aura-bits::after {
  content: "○";
  position: absolute;
  color: #7dd3fc;
  font-size: 0.7rem;
  animation: aura-float 2s ease-in-out infinite;
}

.avatar.aura-bubble .aura-bits::before { left: 4%; top: 6%; }
.avatar.aura-bubble .aura-bits::after { right: 6%; bottom: 14%; font-size: 0.5rem; animation-delay: -0.9s; }

.avatar.aura-leaf .aura-ring {
  background: radial-gradient(circle, rgba(134, 239, 172, 0.45), transparent 70%);
  box-shadow: 0 0 16px 6px rgba(74, 222, 128, 0.35);
  animation: aura-pulse 2.1s ease-in-out infinite;
}

.avatar.aura-leaf .aura-bits::before,
.avatar.aura-leaf .aura-bits::after {
  content: "🍃";
  position: absolute;
  font-size: 0.62rem;
  animation: aura-float 2.3s ease-in-out infinite;
}

.avatar.aura-leaf .aura-bits::before { left: 0; top: 10%; }
.avatar.aura-leaf .aura-bits::after { right: 2%; bottom: 12%; animation-delay: -1s; }

.avatar.aura-candy .aura-ring {
  background: radial-gradient(circle, rgba(251, 207, 232, 0.55), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(244, 114, 182, 0.35);
  animation: aura-pulse 1.6s ease-in-out infinite;
}

.avatar.aura-candy .aura-bits::before,
.avatar.aura-candy .aura-bits::after {
  content: "🍬";
  position: absolute;
  font-size: 0.58rem;
  animation: aura-float 1.8s ease-in-out infinite;
}

.avatar.aura-candy .aura-bits::before { left: 2%; top: 8%; }
.avatar.aura-candy .aura-bits::after { content: "🍭"; right: 0; bottom: 14%; animation-delay: -0.7s; }

.avatar.aura-berry .aura-ring {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.4), transparent 70%);
  box-shadow: 0 0 18px 6px rgba(225, 29, 72, 0.35);
  animation: aura-pulse 1.5s ease-in-out infinite;
}

.avatar.aura-berry .aura-bits::before {
  content: "🫐";
  position: absolute;
  left: 0;
  top: 12%;
  font-size: 0.6rem;
  animation: aura-float 2s ease-in-out infinite;
}

.avatar.aura-slime .aura-ring {
  background: radial-gradient(circle, rgba(163, 230, 53, 0.5), transparent 70%);
  box-shadow: 0 0 18px 7px rgba(132, 204, 22, 0.4);
  animation: aura-pulse 1.3s ease-in-out infinite;
}

.avatar.aura-slime .aura-bits::before,
.avatar.aura-slime .aura-bits::after {
  content: "🟢";
  position: absolute;
  font-size: 0.45rem;
  animation: aura-float 1.6s ease-in-out infinite;
}

.avatar.aura-slime .aura-bits::before { left: 6%; bottom: 8%; }
.avatar.aura-slime .aura-bits::after { right: 8%; top: 6%; animation-delay: -0.5s; }

.avatar.aura-ocean .aura-ring {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.45), transparent 68%);
  box-shadow: 0 0 18px 6px rgba(14, 165, 233, 0.4);
  animation: aura-pulse 2s ease-in-out infinite;
}

.avatar.aura-ocean .aura-bits::before,
.avatar.aura-ocean .aura-bits::after {
  content: "🌊";
  position: absolute;
  font-size: 0.58rem;
  animation: aura-float 2.1s ease-in-out infinite;
}

.avatar.aura-ocean .aura-bits::before { left: 0; bottom: 8%; }
.avatar.aura-ocean .aura-bits::after { content: "🫧"; right: 2%; top: 8%; animation-delay: -1.1s; }

.avatar.aura-snow .aura-ring {
  background: radial-gradient(circle, rgba(224, 242, 254, 0.6), transparent 70%);
  box-shadow: 0 0 16px 6px rgba(186, 230, 253, 0.5);
  animation: aura-pulse 2.3s ease-in-out infinite;
}

.avatar.aura-snow .aura-bits::before,
.avatar.aura-snow .aura-bits::after {
  content: "❄";
  position: absolute;
  font-size: 0.7rem;
  color: #e0f2fe;
  animation: aura-float 2.5s ease-in-out infinite;
}

.avatar.aura-snow .aura-bits::before { left: 4%; top: 4%; }
.avatar.aura-snow .aura-bits::after { right: 4%; bottom: 10%; animation-delay: -1.2s; }

.avatar.aura-clover .aura-ring {
  background: radial-gradient(circle, rgba(74, 222, 128, 0.4), transparent 70%);
  box-shadow: 0 0 16px 6px rgba(22, 163, 74, 0.32);
  animation: aura-pulse 2s ease-in-out infinite;
}

.avatar.aura-clover .aura-bits::before,
.avatar.aura-clover .aura-bits::after {
  content: "🍀";
  position: absolute;
  font-size: 0.6rem;
  animation: aura-float 2.2s ease-in-out infinite;
}

.avatar.aura-clover .aura-bits::before { left: 0; top: 10%; }
.avatar.aura-clover .aura-bits::after { right: 2%; bottom: 14%; animation-delay: -0.9s; }

.avatar.aura-sunset .aura-ring {
  background: conic-gradient(#fb923c, #fb7185, #fbbf24, #fb923c);
  opacity: 0.42;
  filter: blur(1px);
  animation: aura-spin 6s linear infinite;
}

.avatar.aura-music .aura-ring {
  background: radial-gradient(circle, rgba(192, 132, 252, 0.4), transparent 70%);
  box-shadow: 0 0 16px 6px rgba(168, 85, 247, 0.35);
  animation: aura-pulse 1.4s ease-in-out infinite;
}

.avatar.aura-music .aura-bits::before,
.avatar.aura-music .aura-bits::after {
  content: "♪";
  position: absolute;
  font-size: 0.85rem;
  color: #7c3aed;
  font-weight: 800;
  animation: aura-float 1.5s ease-in-out infinite;
}

.avatar.aura-music .aura-bits::before { left: 2%; top: 6%; }
.avatar.aura-music .aura-bits::after { content: "♫"; right: 0; bottom: 16%; animation-delay: -0.6s; }

.avatar.aura-ghost .aura-ring {
  background: radial-gradient(circle, rgba(248, 250, 252, 0.55), transparent 70%);
  box-shadow: 0 0 20px 8px rgba(148, 163, 184, 0.4);
  animation: aura-pulse 2.6s ease-in-out infinite;
}

.avatar.aura-ghost .aura-bits::before {
  content: "👻";
  position: absolute;
  right: 0;
  top: 4%;
  font-size: 0.62rem;
  animation: aura-float 2.8s ease-in-out infinite;
}

.avatar.aura-crystal .aura-ring {
  background: radial-gradient(circle, rgba(165, 243, 252, 0.5), transparent 68%);
  box-shadow: 0 0 18px 6px rgba(34, 211, 238, 0.4);
  animation: aura-flash 1.6s ease-in-out infinite;
}

.avatar.aura-crystal .aura-bits::before,
.avatar.aura-crystal .aura-bits::after {
  content: "◆";
  position: absolute;
  color: #22d3ee;
  font-size: 0.55rem;
  animation: aura-float 1.9s ease-in-out infinite;
}

.avatar.aura-crystal .aura-bits::before { left: 4%; top: 8%; }
.avatar.aura-crystal .aura-bits::after { right: 4%; bottom: 12%; animation-delay: -0.8s; }

.avatar.aura-fairy .aura-ring {
  background: radial-gradient(circle, rgba(253, 224, 71, 0.4), rgba(244, 114, 182, 0.2) 70%);
  box-shadow: 0 0 20px 7px rgba(250, 204, 21, 0.35);
  animation: aura-pulse 1.5s ease-in-out infinite;
}

.avatar.aura-fairy .aura-bits::before,
.avatar.aura-fairy .aura-bits::after {
  content: "✨";
  position: absolute;
  font-size: 0.65rem;
  animation: aura-float 1.7s ease-in-out infinite;
}

.avatar.aura-fairy .aura-bits::before { left: 0; top: 4%; }
.avatar.aura-fairy .aura-bits::after { content: "🦋"; right: 0; bottom: 10%; font-size: 0.55rem; animation-delay: -0.7s; }

.avatar.aura-comet .aura-ring {
  background: conic-gradient(from 200deg, transparent, rgba(254, 240, 138, 0.7), rgba(125, 211, 252, 0.5), transparent);
  opacity: 0.7;
  animation: aura-spin 2.4s linear infinite;
}

.avatar.aura-comet .aura-bits::before {
  content: "☄";
  position: absolute;
  right: -2%;
  top: 0;
  font-size: 0.7rem;
  animation: aura-float 1.3s ease-in-out infinite;
}

.avatar.aura-neon .aura-ring {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 68%);
  box-shadow: 0 0 14px 4px #22d3ee, 0 0 22px 8px #f472b6;
  animation: aura-flash 0.8s ease-in-out infinite;
}

.avatar.aura-lava .aura-ring {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.55), rgba(127, 29, 29, 0.2) 72%);
  box-shadow: 0 0 20px 8px rgba(234, 88, 12, 0.45);
  animation: aura-pulse 1.2s ease-in-out infinite;
}

.avatar.aura-lava .aura-bits::before,
.avatar.aura-lava .aura-bits::after {
  content: "🌋";
  position: absolute;
  font-size: 0.55rem;
  animation: aura-float 1.4s ease-in-out infinite;
}

.avatar.aura-lava .aura-bits::before { left: 2%; bottom: 6%; }
.avatar.aura-lava .aura-bits::after { content: "🟠"; right: 4%; top: 8%; font-size: 0.45rem; animation-delay: -0.5s; }

.avatar.aura-warp .aura-ring {
  inset: -34% -28% -16%;
  background:
    radial-gradient(circle at 50% 45%, rgba(230, 210, 255, 0.85) 0 10%, rgba(150, 80, 255, 0.55) 26%, rgba(80, 30, 200, 0.28) 50%, transparent 72%);
  box-shadow:
    0 0 24px 12px rgba(150, 90, 255, 0.7),
    0 0 46px 20px rgba(100, 50, 230, 0.38);
  animation: aura-pulse 1.8s ease-in-out infinite;
}

.avatar.aura-warp .aura-ring::before,
.avatar.aura-warp .aura-ring::after,
.avatar.aura-warp .aura-orbit::before,
.avatar.aura-warp .aura-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}

.avatar.aura-warp .aura-ring::before {
  inset: 8%;
  border-top-color: #f5f3ff;
  border-right-color: rgba(221, 214, 254, 0.85);
  box-shadow: 0 0 14px rgba(196, 181, 253, 0.95);
  animation: aura-spin 2.4s linear infinite;
}

.avatar.aura-warp .aura-ring::after {
  inset: 26%;
  border-bottom-color: #c4b5fd;
  border-left-color: rgba(167, 139, 250, 0.7);
  animation: aura-spin 1.6s linear infinite reverse;
}

.avatar.aura-warp .aura-orbit {
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
  animation: aura-spin 5s linear infinite reverse;
}

.avatar.aura-warp .aura-orbit::before {
  inset: 16%;
  border-top-color: #ddd6fe;
  border-right-color: rgba(221, 214, 254, 0.4);
  animation: aura-spin 3.2s linear infinite;
}

.avatar.aura-warp .aura-orbit::after {
  inset: 34%;
  border-bottom-color: #a78bfa;
  animation: aura-spin 2.1s linear infinite reverse;
}

.avatar.aura-warp .aura-bits::before,
.avatar.aura-warp .aura-bits::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    10px -18px 0 0 #f5f3ff,
    -14px 8px 0 0 #ddd6fe,
    16px 14px 0 1px #c4b5fd,
    -8px -12px 0 0 #fff,
    4px 20px 0 0 #a78bfa,
    -18px 2px 0 1px #e9d5ff;
  animation: aura-float 1.8s ease-in-out infinite;
}

.avatar.aura-warp .aura-bits::before { left: 8%; top: 6%; }
.avatar.aura-warp .aura-bits::after { right: 6%; bottom: 12%; animation-delay: -0.9s; }

.avatar.lg.aura-warp .aura-ring::before,
.avatar.lg.aura-warp .aura-ring::after,
.avatar.lg.aura-warp .aura-orbit::before,
.avatar.lg.aura-warp .aura-orbit::after {
  border-width: 3px;
}

.avatar.aura-angel {
  filter:
    drop-shadow(0 8px 0 rgba(10, 16, 28, 0.1))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 28px rgba(186, 230, 253, 0.85))
    drop-shadow(0 0 48px rgba(125, 211, 252, 0.45));
}

.avatar.aura-angel .body,
.avatar.aura-angel .face {
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 18px rgba(186, 230, 253, 0.7);
}

.avatar.aura-angel .aura-ring {
  inset: -58% -52% -34%;
  background:
    radial-gradient(circle at 50% 4%, #fff 0 8%, rgba(255, 255, 255, 0.82) 16%, rgba(186, 230, 253, 0.5) 34%, rgba(59, 130, 246, 0.18) 58%, transparent 78%);
  box-shadow:
    0 0 22px 10px rgba(255, 255, 255, 0.95),
    0 0 48px 22px rgba(186, 230, 253, 0.75),
    0 0 80px 36px rgba(125, 211, 252, 0.38);
  animation: angel-bloom 1.7s ease-in-out infinite;
}

.avatar.aura-angel .aura-beam {
  inset: -130% -70% 28%;
  z-index: 0;
  background:
    linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.85) 12%, rgba(224, 242, 254, 0.42) 38%, transparent 74%),
    repeating-conic-gradient(from 0deg at 50% 4%, transparent 0 5deg, rgba(255, 255, 255, 0.32) 5deg 7deg);
  filter: blur(0.2px);
  animation: angel-shine 2.2s ease-in-out infinite;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0 48%, transparent 82%);
}

.avatar.aura-angel .aura-beam::before,
.avatar.aura-angel .aura-beam::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #fff, rgba(186, 230, 253, 0.35), transparent);
  filter: blur(1px);
}

.avatar.aura-angel .aura-beam::before {
  width: 22%;
  height: 88%;
  box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.7);
}

.avatar.aura-angel .aura-beam::after {
  width: 70%;
  height: 8%;
  top: 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff 0 40%, transparent 74%);
  animation: angel-bloom 1.8s ease-in-out infinite;
}

.avatar.aura-angel .aura-crown {
  left: 6%;
  right: 6%;
  top: -92%;
  height: 92%;
  z-index: 1;
  background:
    linear-gradient(#fff, rgba(224, 242, 254, 0.12)) center / 8% 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 8% no-repeat;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #7dd3fc);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 46%, transparent 74%);
  animation: aura-spin 8s linear infinite;
}

.avatar.aura-angel .aura-crown::before,
.avatar.aura-angel .aura-crown::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.85);
}

.avatar.aura-angel .aura-crown::after {
  inset: 28%;
  border-style: dashed;
  animation: aura-spin 3.8s linear infinite reverse;
}

.avatar.aura-angel .aura-orbit {
  left: -48%;
  right: -48%;
  top: 52%;
  height: 52%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 1),
    0 0 24px rgba(125, 211, 252, 0.8),
    0 0 0 8px rgba(255, 255, 255, 0.08);
  animation: aura-spin 6s linear infinite;
}

.avatar.aura-angel .aura-orbit::before,
.avatar.aura-angel .aura-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

.avatar.aura-angel .aura-orbit::before {
  left: 26%;
  right: 26%;
  top: -228%;
  height: 56%;
  border: 3.5px solid #fff;
  box-shadow:
    0 0 12px #fff,
    0 0 26px #7dd3fc,
    0 0 40px rgba(255, 255, 255, 0.7),
    inset 0 0 10px rgba(255, 255, 255, 0.95);
  animation: angel-halo 1.6s ease-in-out infinite;
}

.avatar.aura-angel .aura-orbit::after {
  inset: 8%;
  border-width: 2.5px;
  border-top-color: #fff;
  border-right-color: rgba(186, 230, 253, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  animation: aura-spin 2.6s linear infinite reverse;
}

.avatar.aura-angel .aura-wings {
  inset: -4% -62% 4%;
  z-index: 0;
}

.avatar.aura-angel .aura-wings::before,
.avatar.aura-angel .aura-wings::after,
.avatar.aura-angel .aura-wings i {
  position: absolute;
  top: 0;
  background:
    radial-gradient(circle at 28% 16%, #fff 0 22%, transparent 46%),
    linear-gradient(180deg, #fff 0%, #e0f2fe 42%, #93c5fd 78%, #60a5fa 100%);
  border: 2.5px solid var(--ink);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 1),
    0 0 28px rgba(186, 230, 253, 0.85),
    inset -8px 0 0 rgba(255, 255, 255, 0.45);
}

.avatar.aura-angel .aura-wings::before,
.avatar.aura-angel .aura-wings::after {
  content: "";
  width: 54%;
  height: 104%;
}

.avatar.aura-angel .aura-wings::before {
  left: -10%;
  border-radius: 96% 6% 82% 18%;
  transform-origin: 92% 38%;
  animation: angel-flap-left 1.5s ease-in-out infinite;
}

.avatar.aura-angel .aura-wings::after {
  right: -10%;
  border-radius: 6% 96% 18% 82%;
  transform-origin: 8% 38%;
  animation: angel-flap-right 1.5s ease-in-out infinite;
}

.avatar.aura-angel .aura-wings i {
  display: block;
  width: 40%;
  height: 78%;
  top: 18%;
}

.avatar.aura-angel .aura-wings i:first-child {
  left: 4%;
  border-radius: 88% 14% 70% 28%;
  transform-origin: 88% 30%;
  animation: angel-flap-left 1.5s ease-in-out infinite 0.12s;
}

.avatar.aura-angel .aura-wings i:last-child {
  right: 4%;
  border-radius: 14% 88% 28% 70%;
  transform-origin: 12% 30%;
  animation: angel-flap-right 1.5s ease-in-out infinite 0.12s;
}

.avatar.lg.aura-angel .aura-wings::before,
.avatar.lg.aura-angel .aura-wings::after,
.avatar.lg.aura-angel .aura-wings i {
  border-width: 4px;
}

.avatar.aura-angel .aura-mist {
  left: -62%;
  right: -62%;
  bottom: -28%;
  height: 46%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.92) 0 22%, rgba(186, 230, 253, 0.45) 48%, transparent 78%);
  filter: blur(3px);
  animation: angel-mist 2.4s ease-in-out infinite;
}

.avatar.aura-angel .aura-bits {
  inset: -38% -32% -10%;
  z-index: 5;
}

.avatar.aura-angel .aura-bits::before,
.avatar.aura-angel .aura-bits::after {
  content: "✦";
  position: absolute;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-shadow: 0 0 8px #fff, 0 0 16px #7dd3fc, 0 0 22px #fff;
  animation: angel-spark 1.4s ease-in-out infinite;
}

.avatar.aura-angel .aura-bits::before {
  left: -8%;
  top: -6%;
  box-shadow:
    22px 28px 0 0 #fff,
    8px 52px 0 -1px #e0f2fe,
    36px 10px 0 -1px #fff,
    48px 40px 0 0 #bae6fd,
    14px 70px 0 -1px #fff;
}

.avatar.aura-angel .aura-bits::after {
  content: "♪";
  right: -6%;
  bottom: 4%;
  font-size: 1rem;
  animation: angel-notes 2.2s ease-in-out infinite;
  text-shadow:
    0 0 8px #fff,
    0 0 16px #7dd3fc,
    -22px -30px 0 #fff,
    -8px -52px 0 #e0f2fe,
    -34px -12px 0 #bae6fd;
}

@keyframes angel-flap-left {
  0%, 100% { transform: rotate(-16deg) scale(1); }
  50% { transform: rotate(-34deg) scale(1.12); }
}

@keyframes angel-flap-right {
  0%, 100% { transform: rotate(16deg) scale(1); }
  50% { transform: rotate(34deg) scale(1.12); }
}

@keyframes angel-shine {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

@keyframes angel-bloom {
  0%, 100% { transform: scale(0.92); opacity: 0.78; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes angel-halo {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.85; }
  50% { transform: scaleX(1.12) scaleY(0.9); opacity: 1; }
}

@keyframes angel-mist {
  0%, 100% { transform: scaleX(0.92); opacity: 0.7; }
  50% { transform: scaleX(1.08); opacity: 1; }
}

@keyframes angel-spark {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.75; }
  50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
}

@keyframes angel-notes {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.8; }
  50% { transform: translateY(-10px) rotate(8deg); opacity: 1; }
}

@keyframes aura-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.75; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes aura-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes aura-spin {
  to { transform: rotate(360deg); }
}

@keyframes aura-flash {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.game-card {
  text-align: center;
}

.game-preview {
  display: grid;
  place-items: center;
  min-height: 88px;
  font-size: 3rem;
}

.game-stage,
.game-result {
  text-align: center;
}

.game-result .quest-emoji {
  margin: 0;
}

.game-hud {
  font-weight: 800;
  margin-bottom: 12px;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
}

.memory-card {
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #7b61ff;
  color: var(--ink);
  font-size: 1.7rem;
  box-shadow: none;
}

.memory-card.up,
.memory-card.matched {
  background: #fffdf8;
}

.memory-card.matched {
  background: #e8f8f0;
}

.game-field {
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: 28px;
  border: 3px solid var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #fff 0 8%, transparent 22%),
    linear-gradient(#9bd6ff, #fff3c4 70%);
}

.game-field-bubbles {
  background:
    radial-gradient(circle at 80% 20%, #fbcfe8 0 10%, transparent 24%),
    linear-gradient(#c4b5fd, #e0f2fe 72%);
}

.game-star,
.game-bubble {
  position: absolute;
  top: -12%;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 2rem;
  line-height: 1;
  padding: 0;
  animation: game-fall linear forwards;
}

.game-bubble {
  font-size: 2.2rem;
}

@keyframes game-fall {
  to { transform: translateY(430px); }
}

.simon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}

.simon-pad {
  height: 110px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: none;
  opacity: 0.5;
}

.simon-pad.lit {
  opacity: 1;
  filter: brightness(1.15);
  transform: scale(1.03);
}

.simon-pink { background: #fb7185; }
.simon-blue { background: #38bdf8; }
.simon-sun { background: #facc15; }
.simon-leaf { background: #34d399; }

.cups-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  min-height: 170px;
  align-items: flex-end;
}

.cup {
  width: 92px;
  height: 118px;
  background: #ef476f;
  border: 3px solid var(--ink);
  border-radius: 18px 18px 36px 36px;
  box-shadow: none;
  position: relative;
  transition: transform 0.2s ease;
}

.cup:nth-child(2) { background: #f4b000; }
.cup:nth-child(3) { background: #3a86ff; }

.cup-star {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  font-size: 1.6rem;
}

@media (max-width: 860px) {
  .welcome,
  .plot-layout {
    grid-template-columns: 1fr;
  }

  .park {
    height: 380px;
  }

  .memory-grid {
    max-width: 100%;
    gap: 8px;
  }

  .game-field {
    height: 300px;
  }

  .simon-pad {
    height: 88px;
  }
}