:root {
  --green: #58cc02;
  --green-d: #46a302;
  --blue: #1cb0f6;
  --blue-d: #1899d6;
  --red: #ff4b4b;
  --red-d: #ea2b2b;
  --orange: #ff9600;
  --bg: #f0f0f0;
  --card: #ffffff;
  --text: #3c3c3c;
  --muted: #afafaf;
  --border: #e5e5e5;
  --chip-shadow: #d4d4d4;
  --mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}
html {
  font-size: 18px;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}
#app {
  max-width: 620px;
  width: 100%;
  min-height: 100dvh;
  background: var(--card);
  position: relative;
  display: flex;
  flex-direction: column;
}
.btn {
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 12px;
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: all 0.12s;
}

.btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.btn:disabled {
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  background: var(--border);
  border-bottom-color: var(--chip-shadow);
  color: var(--muted);
}

.btn-clear {
  background: var(--card);
  border: 2px solid var(--border);
  border-bottom: 4px solid var(--chip-shadow);
  color: var(--muted);
}

.btn-clear:hover:not(:disabled) {
  background: #f5f5f5;
}
.btn-clear:active:not(:disabled) {
  border-bottom-width: 2px;
  transform: translateY(2px);
}
/* drag ghost is appended to document.body via useChipDrag, so must be global */
.drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.88;
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.complete[data-v-c39a47c5] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.complete-inner[data-v-c39a47c5] {
  text-align: center;
  padding: 2rem;
}
.trophy[data-v-c39a47c5] {
  font-size: 5rem;
  animation: complete-pop-c39a47c5 0.45s ease;
}
@keyframes complete-pop-c39a47c5 {
0% {
    transform: scale(0);
}
65% {
    transform: scale(1.2);
}
100% {
    transform: scale(1);
}
}
h1[data-v-c39a47c5] {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0.5rem 0;
}
p[data-v-c39a47c5] {
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.complete-perfect h1[data-v-c39a47c5] {
  background: linear-gradient(135deg, var(--orange), #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ultimate variant */
.complete-ultimate {
&[data-v-c39a47c5] {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at center,
    rgba(255, 215, 0, 0.18),
    rgba(255, 75, 75, 0.1) 35%,
    rgba(88, 204, 2, 0.08) 60%,
    rgba(28, 176, 246, 0.06) 80%,
    transparent
  );
  animation: complete-ulti-bg-c39a47c5 6s ease-in-out infinite;
  }
&[data-v-c39a47c5]::before,
  &[data-v-c39a47c5]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 40%;
    height: 40%;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.9), transparent 50%),
      radial-gradient(3px 3px at 70% 60%, rgba(255, 255, 255, 0.8), transparent 50%),
      radial-gradient(2px 2px at 45% 85%, rgba(206, 130, 255, 0.85), transparent 50%),
      radial-gradient(2px 2px at 90% 20%, rgba(28, 176, 246, 0.8), transparent 50%),
      radial-gradient(1.5px 1.5px at 15% 70%, rgba(88, 204, 2, 0.85), transparent 50%),
      radial-gradient(3px 3px at 55% 15%, rgba(255, 75, 75, 0.8), transparent 50%);
    animation: complete-sparkle-c39a47c5 3s ease-in-out infinite;
}
&[data-v-c39a47c5]::before {
    top: 0;
    left: 0;
}
&[data-v-c39a47c5]::after {
    bottom: 0;
    right: 0;
    animation-delay: 1.5s;
}
& h1[data-v-c39a47c5] {
    font-size: 2.6rem;
    letter-spacing: 2px;
    background: linear-gradient(
      90deg,
      #ff4b4b,
      #ff9600,
      #ffd700,
      #58cc02,
      #1cb0f6,
      #ce82ff,
      #ff86d0,
      #ff4b4b
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
      complete-rainbow-c39a47c5 2s linear infinite,complete-bounce-c39a47c5 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
}
& .trophy[data-v-c39a47c5] {
    font-size: 6rem;
    animation:
      complete-pop-c39a47c5 0.45s ease,complete-ulti-trophy-c39a47c5 2.2s ease-in-out 0.45s infinite;
    filter: drop-shadow(0 0 28px rgba(255, 215, 0, 0.85))
      drop-shadow(0 0 60px rgba(255, 150, 0, 0.35));
}
}
@keyframes complete-ulti-bg-c39a47c5 {
0%,
  100% {
    filter: hue-rotate(0deg) saturate(1.1);
}
50% {
    filter: hue-rotate(40deg) saturate(1.3);
}
}
@keyframes complete-sparkle-c39a47c5 {
0%,
  100% {
    opacity: 0.2;
    transform: scale(1) rotate(0);
}
50% {
    opacity: 1;
    transform: scale(1.3) rotate(15deg);
}
}
@keyframes complete-rainbow-c39a47c5 {
from {
    background-position: 0% center;
}
to {
    background-position: 200% center;
}
}
@keyframes complete-bounce-c39a47c5 {
0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
}
55% {
    transform: scale(1.22) rotate(4deg);
}
80% {
    transform: scale(0.95) rotate(-2deg);
}
100% {
    transform: scale(1) rotate(0);
    opacity: 1;
}
}
@keyframes complete-ulti-trophy-c39a47c5 {
0%,
  100% {
    transform: translateY(0) rotate(-6deg) scale(1);
}
25% {
    transform: translateY(-12px) rotate(6deg) scale(1.06);
}
50% {
    transform: translateY(-4px) rotate(-4deg) scale(1.02);
}
75% {
    transform: translateY(-14px) rotate(5deg) scale(1.05);
}
}
.btn-row[data-v-c39a47c5] {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.btn-restart {
&[data-v-c39a47c5] {
  flex: 1;
  max-width: 220px;
  background: var(--blue);
  border-bottom: 4px solid var(--blue-d);
  color: #fff;
  }
&[data-v-c39a47c5]:hover {
    filter: brightness(1.06);
}
&[data-v-c39a47c5]:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
}
}
.btn-x {
&[data-v-c39a47c5] {
  flex: 1;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #000;
  border-bottom: 4px solid #333;
  color: #fff;
  text-decoration: none;
  }
&[data-v-c39a47c5]:hover {
    filter: brightness(1.4);
}
&[data-v-c39a47c5]:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
}
}

.confetti-canvas[data-v-5d85469a] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.congrats-overlay[data-v-3c835e4c] {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
  animation: congrats-fade-in-3c835e4c 0.3s ease;
}
@keyframes congrats-fade-in-3c835e4c {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.congrats-modal[data-v-3c835e4c] {
  position: fixed;
  left: 8px;
  right: 8px;
  max-width: 604px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.congrats-arrow[data-v-3c835e4c] {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
}
.congrats-modal h2[data-v-3c835e4c] {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.congrats-modal p[data-v-3c835e4c] {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.prize-inline[data-v-3c835e4c] {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  background: linear-gradient(135deg, #e83e8c, #ff2d55);
  color: #fff;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 800;
  vertical-align: middle;
}
.bonus-note[data-v-3c835e4c] {
  color: var(--muted) !important;
  font-size: 0.95rem !important;
}
.staff-outfit {
&[data-v-3c835e4c] {
  margin: 0.75rem auto 0;
  }
img[data-v-3c835e4c] {
    display: block;
    width: 180px;
    height: auto;
    border-radius: 12px;
    margin: 0 auto;
}
figcaption[data-v-3c835e4c] {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    text-align: center;
}
}
.btn-row[data-v-3c835e4c] {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.btn-ok {
&[data-v-3c835e4c] {
  flex: 1;
  background: var(--blue);
  border-bottom: 4px solid var(--blue-d);
  color: #fff;
  }
&[data-v-3c835e4c]:hover {
    filter: brightness(1.06);
}
&[data-v-3c835e4c]:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
}
}
.btn-x {
&[data-v-3c835e4c] {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #000;
  border-bottom: 4px solid #333;
  color: #fff;
  text-decoration: none;
  }
&[data-v-3c835e4c]:hover {
    filter: brightness(1.4);
}
&[data-v-3c835e4c]:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
}
}

.chip {
&[data-v-769465e5] {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: all 0.12s ease;
  position: relative;
  border: 2px solid var(--border);
  border-bottom: 4px solid var(--chip-shadow);
  background: var(--card);
  color: var(--text);
  touch-action: none;
}
&[data-v-769465e5]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}
&[data-v-769465e5]:hover {
    transform: translateY(-1px);
}
&[data-v-769465e5]:active {
    transform: translateY(1px);
}
&.dragging[data-v-769465e5] {
    opacity: 0.25;
}
}
.chip-space[data-v-769465e5] {
  color: var(--muted);
  opacity: 0.7;
}
.chip-badge[data-v-769465e5] {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  background: var(--blue);
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}
.answer-chip {
&[data-v-769465e5] {
  background: #ddf4ff;
  border-color: #84d8ff;
  border-bottom-color: #56c4f5;
  color: #1a7fad;
  transition:
    margin 0.12s ease,
    background 0.12s;
}
&[data-v-769465e5]:hover {
    background: #c9edff;
}
&.drop-before {
&[data-v-769465e5] {
    margin-left: 28px;
}
&[data-v-769465e5]::before {
      content: "";
      position: absolute;
      left: -16px;
      top: 2px;
      bottom: 4px;
      width: 4px;
      background: var(--blue);
      border-radius: 2px;
}
}
&.drop-after {
&[data-v-769465e5] {
    margin-right: 28px;
}
&[data-v-769465e5]::after {
      content: "";
      position: absolute;
      right: -16px;
      top: 2px;
      bottom: 4px;
      width: 4px;
      background: var(--blue);
      border-radius: 2px;
}
}
}
.bank-chip.used {
&[data-v-769465e5] {
  background: var(--bg);
  border-style: dashed;
  border-color: var(--border);
  border-bottom-color: var(--border);
  color: transparent;
  pointer-events: none;
  cursor: default;
}
& .chip-space[data-v-769465e5] {
    color: transparent;
}
}

.answer-section[data-v-7e9a0542] {
  padding: 0 1.25rem;
  margin-bottom: 0.75rem;
}
.section-label[data-v-7e9a0542] {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.answer-area[data-v-7e9a0542] {
  min-height: calc(3.4rem + 10px);
  background: #fafafa;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  transition: border-color 0.2s;
}
.placeholder-text[data-v-7e9a0542] {
  color: #ccc;
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}

.banner {
&[data-v-19424166] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 620px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  border-top: 2px solid transparent;
  z-index: 7;
}
&.banner-success[data-v-19424166] {
    animation: banner-fade-in-19424166 0.25s ease;
}
&.banner-fail[data-v-19424166] {
    animation: banner-fade-in-19424166 0.25s ease;
}
&.banner-perfect {
&[data-v-19424166] {
    animation: banner-slide-up-19424166 0.3s ease;
    border-top: 3px solid transparent;
    overflow: visible;
}
&[data-v-19424166]::before {
      content: "";
      position: absolute;
      top: -3px;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--orange), #ffd700, var(--orange));
      background-size: 200% 100%;
      animation: banner-shimmer-19424166 2s linear infinite;
}
}
}
@keyframes banner-fade-in-19424166 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes banner-slide-up-19424166 {
from {
    transform: translateY(100%);
}
to {
    transform: none;
}
}
@keyframes banner-shimmer-19424166 {
to {
    background-position: -200% 0;
}
}
.banner-success[data-v-19424166] {
  background: #d7ffb8;
  border-top-color: var(--green);
}
.banner-perfect[data-v-19424166] {
  background: #fff3cd;
  border-top-color: var(--orange);
}
.banner-fail[data-v-19424166] {
  background: #ffdfe0;
  border-top-color: var(--red);
}
.banner-inner[data-v-19424166] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.banner-icon[data-v-19424166] {
  font-size: 1.6rem;
  line-height: 1;
}
.banner-success .banner-icon[data-v-19424166] {
  color: var(--green-d);
}
.banner-perfect .banner-icon[data-v-19424166] {
  color: #e6960a;
}
.banner-fail .banner-icon[data-v-19424166] {
  color: var(--red);
}
.banner-body[data-v-19424166] {
  flex: 1;
}
.banner-title[data-v-19424166] {
  font-size: 1.2rem;
  font-weight: 800;
}
.banner-success .banner-title[data-v-19424166] {
  color: var(--green-d);
}
.banner-perfect .banner-title[data-v-19424166] {
  color: #b87a00;
}
.banner-fail .banner-title[data-v-19424166] {
  color: var(--red-d);
}
.banner-detail[data-v-19424166] {
  width: 100%;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.45;
}

/* perfect decorations */
.perf-line[data-v-19424166] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.banner-perfect .perf-line[data-v-19424166] {
  opacity: 0;
  animation: banner-pop-in-19424166 0.3s ease 0.3s forwards;
}
@keyframes banner-pop-in-19424166 {
from {
    opacity: 0;
    transform: scale(0.5);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.perf-tag-wrap[data-v-19424166] {
  position: relative;
  display: inline-flex;
}
.perf-tag {
&[data-v-19424166] {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ffd700);
  padding: 0.2rem 0.55rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
&[data-v-19424166]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: banner-tag-shine-19424166 1.2s ease 0.6s infinite;
}
}
@keyframes banner-tag-shine-19424166 {
to {
    left: 200%;
}
}
.perf-star {
&[data-v-19424166] {
  position: absolute;
  pointer-events: none;
  font-size: 0.6rem;
}
&.perf-star-1[data-v-19424166] {
    top: -8px;
    right: -6px;
    color: #ffd700;
    animation: banner-star-spin-19424166 2s linear infinite;
}
&.perf-star-2[data-v-19424166] {
    bottom: -7px;
    left: -8px;
    color: var(--orange);
    animation: banner-star-spin-19424166 2.5s linear infinite reverse;
}
&.perf-star-3[data-v-19424166] {
    top: -5px;
    left: 50%;
    color: #ffb300;
    font-size: 0.5rem;
    animation: banner-star-spin-19424166 3s linear infinite;
}
}
@keyframes banner-star-spin-19424166 {
to {
    transform: rotate(360deg);
}
}
.perf-dot[data-v-19424166] {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: banner-perf-dot-19424166 0.8s ease forwards;
}
@keyframes banner-perf-dot-19424166 {
0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}
100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
}
}
.btn-next {
&[data-v-19424166] {
  background: var(--green);
  border-bottom: 4px solid var(--green-d);
  color: #fff;
  margin-left: auto;
}
&[data-v-19424166]:hover {
    filter: brightness(1.06);
}
&[data-v-19424166]:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
}
}
.banner-perfect .btn-next[data-v-19424166] {
  background: linear-gradient(135deg, var(--orange), #ffd700);
  border-bottom-color: #cc7a00;
}
.btn-back {
&[data-v-19424166] {
  background: var(--card);
  border: 2px solid var(--border);
  border-bottom: 3px solid var(--border);
  color: var(--text);
  margin-left: auto;
}
&[data-v-19424166]:hover {
    background: #f5f5f5;
}
&[data-v-19424166]:active {
    border-bottom-width: 2px;
    transform: translateY(1px);
}
}

.challenge[data-v-cdb74bf0] {
  text-align: center;
  padding: 1rem 1.25rem 0.75rem;
}
.stage-num[data-v-cdb74bf0] {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--muted);
}
h2[data-v-cdb74bf0] {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
p[data-v-cdb74bf0] {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.expected-wrap[data-v-cdb74bf0] {
  text-align: left;
  border-radius: 10px;
  overflow: hidden;
}
.expected-bar[data-v-cdb74bf0] {
  background: #252545;
  padding: 0.25rem 0.7rem;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.expected {
&[data-v-cdb74bf0] {
  background: #1a1a2e;
  padding: 0.5rem 0.85rem;
  font-family: var(--mono);
  font-size: 1.05rem;
  white-space: pre;
  line-height: 1.5;
  text-align: left;
  color: var(--green);
  max-width: 100%;
  overflow-x: auto;
  }
&.self-ref[data-v-cdb74bf0] {
    font-family: "Nunito", sans-serif;
    font-style: italic;
    color: #ffd700;
    text-align: center;
    white-space: normal;
}
}
.hint {
&[data-v-cdb74bf0] {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.6rem;
  opacity: 0;
  }
&.visible[data-v-cdb74bf0] {
    opacity: 1;
    transition: opacity 1.5s ease;
}
}
.hint-badge[data-v-cdb74bf0] {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--orange);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  vertical-align: middle;
}

.bank-section[data-v-4a71efed] {
  padding: 0 1.25rem 10rem;
  margin-bottom: 1rem;
}
.section-label[data-v-4a71efed] {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.bank-area {
&[data-v-4a71efed] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  }
&.drop-target[data-v-4a71efed] {
    background: rgba(0, 0, 0, 0.04);
    outline: 2px dashed var(--muted);
    outline-offset: -2px;
    border-radius: 12px;
    transition: background 0.15s;
}
}

.topbar[data-v-64c69b1c] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  min-height: 58px;
}
.progress-track[data-v-64c69b1c] {
  flex: 1;
  height: 16px;
  background: var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.progress-fill[data-v-64c69b1c] {
  height: 100%;
  background: var(--green);
  border-radius: 8px;
  transition: width 0.45s ease;
  width: var(--progress, 0%);
}
.progress-label[data-v-64c69b1c] {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.btn-stages {
&[data-v-64c69b1c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid var(--border);
  border-bottom: 3px solid var(--chip-shadow);
  background: var(--card);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s;
  }
&[data-v-64c69b1c]:hover {
    background: #f5f5f5;
}
&[data-v-64c69b1c]:active {
    border-bottom-width: 2px;
    transform: translateY(1px);
}
}
.badge {
&[data-v-64c69b1c] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: "Nunito", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  animation: badge-pop-64c69b1c 0.45s ease;
  letter-spacing: 0.4px;
  }
&[data-v-64c69b1c]:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}
&[data-v-64c69b1c]:active {
    transform: scale(0.95);
}
}
.badge-prize[data-v-64c69b1c] {
  background: linear-gradient(135deg, #e83e8c, #ff2d55);
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.35);
  margin-left: auto;
}
.badge-allclear[data-v-64c69b1c] {
  background: linear-gradient(135deg, #ffd700, #ff9600);
  box-shadow: 0 2px 8px rgba(255, 150, 0, 0.35);
}
.badge-perfect[data-v-64c69b1c] {
  background: linear-gradient(135deg, #58cc02, #1cb0f6);
  box-shadow: 0 2px 8px rgba(88, 204, 2, 0.35);
}
.badge-ultimate[data-v-64c69b1c] {
  background: linear-gradient(
    90deg,
    #ff4b4b,
    #ff9600,
    #ffd700,
    #58cc02,
    #1cb0f6,
    #ce82ff,
    #ff86d0,
    #ff4b4b
  );
  background-size: 200% auto;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.45);
  animation:
    badge-pop-64c69b1c 0.45s ease,badge-rainbow-64c69b1c 3s linear infinite;
}
@keyframes badge-pop-64c69b1c {
0% {
    transform: scale(0);
}
65% {
    transform: scale(1.2);
}
100% {
    transform: scale(1);
}
}
@keyframes badge-rainbow-64c69b1c {
from {
    background-position: 0% center;
}
to {
    background-position: 200% center;
}
}

.result-panel[data-v-e502dc91] {
  flex: 1;
  background: var(--card);
  border-top: 2px solid var(--border);
  overflow-y: auto;
  animation: result-slide-up-e502dc91 0.25s ease;
}
@keyframes result-slide-up-e502dc91 {
from {
    transform: translateY(30px);
    opacity: 0;
}
to {
    transform: none;
    opacity: 1;
}
}
.result-panel-inner[data-v-e502dc91] {
  padding: 1rem 1.25rem 70px;
}
.code-section[data-v-e502dc91] {
  margin-bottom: 0.75rem;
}
.result-wrap[data-v-e502dc91] {
  text-align: left;
  border-radius: 10px;
  overflow: hidden;
}
.result-bar[data-v-e502dc91] {
  background: #252545;
  padding: 0.25rem 0.7rem;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.code-content[data-v-e502dc91],
.output-content[data-v-e502dc91] {
  background: #1a1a2e;
  padding: 0.5rem 0.85rem;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  overflow-x: auto;
}
.code-content[data-v-e502dc91] {
  color: #e8e8e8;
}
.output-section[data-v-e502dc91] {
  margin-bottom: 0.75rem;
}
.output-content {
&[data-v-e502dc91] {
  color: var(--green);
  min-height: 38px;
  }
[data-v-e502dc91] .err-text {
    color: var(--red);
}
[data-v-e502dc91] .no-output {
    color: var(--muted);
    font-style: italic;
}
}

.run-bar[data-v-dc419c66] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 620px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  background: var(--card);
  z-index: 6;
  border-top: 1px solid var(--border);
}
.run-bar-inner[data-v-dc419c66] {
  display: flex;
  gap: 0.5rem;
}
.btn-run {
&[data-v-dc419c66] {
  flex: 1;
  background: var(--green);
  border-bottom: 4px solid var(--green-d);
  color: #fff;
  }
&.running[data-v-dc419c66] {
    opacity: 0.7;
}
&[data-v-dc419c66]:hover:not(:disabled) {
    filter: brightness(1.06);
}
&[data-v-dc419c66]:active:not(:disabled) {
    border-bottom-width: 2px;
    transform: translateY(2px);
}
}
.btn-clear[data-v-dc419c66] {
  flex-shrink: 0;
}
.spinner[data-v-dc419c66] {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-dc419c66 0.6s linear infinite;
}
@keyframes spin-dc419c66 {
to {
    transform: rotate(360deg);
}
}

.game[data-v-e813159e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
}

.loading[data-v-1a5231c5] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-inner[data-v-1a5231c5] {
  text-align: center;
  padding: 2rem;
}
.loading-gem[data-v-1a5231c5] {
  font-size: 3.5rem;
  animation: loading-pulse-1a5231c5 1.6s ease-in-out infinite;
}
@keyframes loading-pulse-1a5231c5 {
0%,
  100% {
    transform: scale(1);
}
50% {
    transform: scale(1.15);
}
}
h1[data-v-1a5231c5] {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0.75rem 0;
}
.loading-credit[data-v-1a5231c5] {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.loading-bar[data-v-1a5231c5] {
  width: 220px;
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
  margin: 0 auto 0.75rem;
}
.loading-fill[data-v-1a5231c5] {
  height: 100%;
  background: var(--green);
  border-radius: 7px;
  width: 0;
  animation: loading-progress-1a5231c5 2.5s ease-in-out infinite;
}
@keyframes loading-progress-1a5231c5 {
0% {
    width: 0;
}
50% {
    width: 85%;
}
100% {
    width: 100%;
}
}
.loading-text[data-v-1a5231c5] {
  color: var(--muted);
  font-size: 0.875rem;
}

.stage-overlay[data-v-227f7094] {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: stage-fade-in-227f7094 0.2s ease;
}
@keyframes stage-fade-in-227f7094 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.stage-modal[data-v-227f7094] {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.stage-modal h2[data-v-227f7094] {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.stage-grid[data-v-227f7094] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.stage-section-header[data-v-227f7094] {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.5rem 0.2rem 0.2rem;
  border-top: 2px dashed var(--border);
  margin-top: 0.4rem;
}
.stage-item {
&[data-v-227f7094] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.12s;
  text-align: left;
  }
&[data-v-227f7094]:hover {
    background: #f5f5f5;
    border-color: var(--blue);
}
&[data-v-227f7094]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}
&.current[data-v-227f7094] {
    border-color: var(--blue);
    background: #ddf4ff;
}
& .stage-num[data-v-227f7094] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
}
&.cleared .stage-num {
&[data-v-227f7094] {
    background: var(--green);
    color: #fff;
    position: relative;
    }
&[data-v-227f7094]::after {
      content: "\2713";
      position: absolute;
      bottom: -3px;
      right: -3px;
      font-size: 0.5rem;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--green-d);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
}
}
&.perfect .stage-num {
&[data-v-227f7094] {
    background: linear-gradient(135deg, var(--orange), #ffd700);
    color: #fff;
    position: relative;
    }
&[data-v-227f7094]::after {
      content: "\2713";
      position: absolute;
      bottom: -3px;
      right: -3px;
      font-size: 0.5rem;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #cc7a00;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
}
}
& .stage-name[data-v-227f7094] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 800;
}
}
.stage-perfect-label[data-v-227f7094] {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #ffd700);
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  flex-shrink: 0;
}
.stage-close-row[data-v-227f7094] {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.btn-reset {
&[data-v-227f7094] {
  background: var(--card);
  border: 2px solid var(--border);
  border-bottom: 3px solid var(--border);
  color: var(--red);
  font-size: 0.8rem;
  }
&[data-v-227f7094]:hover {
    background: #fff0f0;
    border-color: var(--red);
}
&[data-v-227f7094]:active {
    border-bottom-width: 2px;
    transform: translateY(1px);
}
}