/* FIRST BEAT · Stage 1 / Stage 2 selection on the level card. Keep the original menu typography. */
.stage2-dev .world-stage-card { position: relative; flex-shrink: 0; }
.stage2-dev.design-preview .world-stage-card .lvl { width: 100%; min-height: 78px; padding-right: 166px; }
.stage2-dev .world-stage-card .lvl .pill { display: none; }
.stage2-dev .world-stage-card .lvl .meta { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage2-dev .levels { min-height: 0; overflow-y: auto; scrollbar-width: thin; flex-shrink: 1; }
.stage2-dev .lvl[data-level-id^="first-beat-stage2-"] .big { background: linear-gradient(135deg,rgba(143,104,233,.22),rgba(215,88,227,.12)); }
@media (max-height: 480px) {
  .stage2-dev.design-preview .main { max-height: calc(100dvh - 16px); }
  .stage2-dev.design-preview .world-stage-card .lvl { min-height: 58px; padding-right: 142px; }
}
@media (max-height: 330px) {
  .stage2-dev.design-preview .main { gap: 4px; }
}
@media (max-height: 280px) {
  .stage2-dev #menu { padding-top: 2px; padding-bottom: 2px; }
  .stage2-dev.design-preview .main { max-height: calc(100dvh - 4px); padding-top: 4px; padding-bottom: 4px; gap: 3px; }
}

/* Stage switch (Claude 09.10.): two stage keys with a sliding light. Stage 1 cyan, Stage 2 violet; locked until Stage 1 is beaten. */
.stage2-dev .stage-switch:not(.hidden) { display: flex; position: absolute; right: 12px; top: 8px; width: 132px; height: 50px; padding: 3px; gap: 3px; transform: skewX(-9deg); border: 1px solid #ffffff1f; border-radius: 9px; background: linear-gradient(180deg,#0a1520,#060d16); box-shadow: inset 0 1px #ffffff12, 0 4px 14px #0008; }
.stage2-dev .stage-glow { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4.5px); border-radius: 6px; background: linear-gradient(160deg,#3fe3ff,#1477a8); box-shadow: 0 0 16px #3fe3ff88, inset 0 1px #ffffff66; transition: transform .38s cubic-bezier(.55,-.35,.3,1.45), background .38s, box-shadow .38s; }
.stage2-dev .stage-switch[data-on="2"] .stage-glow { transform: translateX(calc(100% + 3px)); background: linear-gradient(160deg,#c785ff,#6a2bd1); box-shadow: 0 0 18px #b06bff99, inset 0 1px #ffffff66; }
.stage2-dev .stage-key { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 0; border: 0; background: none; color: #7f97a8; cursor: pointer; transform: skewX(9deg); transition: color .25s; }
.stage2-dev .stage-key small { font: 800 7px var(--ui); letter-spacing: 1.6px; line-height: 1; opacity: .85; }
.stage2-dev .stage-key b { font: 400 21px var(--display, var(--ui)); line-height: 1.05; }
.stage2-dev .stage-key.on { color: #fff; text-shadow: 0 0 8px #ffffffaa; }
.stage2-dev .stage-key:not(.on):not(.lock):hover { color: #d9f6ff; }
.stage2-dev .stage-key.lock { color: #5d6b78; cursor: not-allowed; }
.stage2-dev .stage-key.lock b { font-size: 15px; filter: grayscale(.4); opacity: .8; }
.stage2-dev .stage-key:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
.stage2-dev .stage-new { position: absolute; top: -9px; right: -7px; padding: 1px 5px; border-radius: 6px; background: #ff4fa8; color: #fff; font: 800 8px var(--ui); font-style: normal; letter-spacing: .6px; box-shadow: 0 0 10px #ff4fa8aa; animation: stageNew 1.1s ease-in-out infinite; }
.stage2-dev .stage-hint { position: absolute; right: 2px; bottom: -15px; transform: skewX(9deg); font: 800 8px var(--ui); letter-spacing: .5px; color: #ffbf6b; white-space: nowrap; pointer-events: none; opacity: 0; }
.stage2-dev .stage-switch.nope { animation: stageNope .42s ease; }
.stage2-dev .stage-switch.nope .stage-hint { color: #fff; text-shadow: 0 0 8px #ff9b3d; animation: stageHint 1.6s ease forwards; }
@keyframes stageHint { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* the card the switch sits on: violet glow for Stage 2 and a light sweep when the stage changes */
.stage2-dev .world-stage-card[data-current-stage="2"] .lvl { box-shadow: 0 0 0 1px #b07bff8c, 0 0 26px #8a4dff40; }
.stage2-dev .world-stage-card::after { content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; background: linear-gradient(105deg,transparent 35%,#ffffffb0 50%,transparent 65%) no-repeat; background-size: 260% 100%; }
.stage2-dev .world-stage-card.stage-warp::after { animation: stageSweep .6s ease-out; }
.stage2-dev .world-stage-card.stage-warp .lvl { animation: stageIn .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes stageSweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -20% 0; } }
@keyframes stageIn { 0% { transform: scale(.96) skewX(-3deg); filter: brightness(2.2) saturate(1.6); } 100% { transform: none; filter: none; } }
@keyframes stageNope { 0%,100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -4px; } 80% { translate: 2px; } }
.stage2-dev .stage-key.unlocked b { animation: stageOpen 1.2s cubic-bezier(.2,1.6,.4,1); }
.stage2-dev .stage-key.unlocked::after { content: ''; position: absolute; inset: -6px; border-radius: 10px; border: 2px solid #c785ff; pointer-events: none; animation: stageRing 1.1s ease-out forwards; }
@keyframes stageOpen { 0% { transform: scale(.2) rotate(-25deg); color: #fff; text-shadow: 0 0 22px #fff, 0 0 40px #c785ff; } 45% { transform: scale(1.5) rotate(6deg); text-shadow: 0 0 18px #fff, 0 0 30px #c785ff; } 100% { transform: none; } }
@keyframes stageRing { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes stageNew { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (max-height: 480px) {
  .stage2-dev .stage-switch:not(.hidden) { width: 112px; height: 42px; top: 6px; right: 10px; }
  .stage2-dev .stage-key b { font-size: 17px; }
  .stage2-dev .stage-key.lock b { font-size: 13px; }
  .stage2-dev .stage-hint { bottom: -13px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage2-dev .stage-glow, .stage2-dev .stage-key { transition: none; }
  .stage2-dev .stage-key.unlocked b, .stage2-dev .stage-key.unlocked::after, .stage2-dev .stage-new, .stage2-dev .stage-switch.nope, .stage2-dev .world-stage-card.stage-warp::after, .stage2-dev .world-stage-card.stage-warp .lvl { animation: none; }
}