.resonance-stage {
   position: relative;
   width: 100%;
   height: calc(100vh - 80px);
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid rgba(148, 163, 184, 0.22);
   box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   background:
     radial-gradient(900px 520px at 50% 18%, rgba(91, 33, 182, 0.12), rgba(2, 6, 23, 0.92) 55%, rgba(0, 0, 0, 0.98)),
     radial-gradient(700px 520px at 22% 78%, rgba(185, 28, 28, 0.06), rgba(0,0,0,0) 62%),
     radial-gradient(900px 640px at 80% 74%, rgba(0, 0, 0, 0.65), rgba(0,0,0,0) 72%);
 }
 .resonance-stage::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: 0.12;
   mix-blend-mode: overlay;
   background:
     repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px),
     repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 11px),
     radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(0,0,0,0) 55%);
 }
 .resonance-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
 }
 .resonance-nebula {
   position: absolute;
   inset: -25%;
   background:
     radial-gradient(closest-side at 40% 38%, rgba(109, 40, 217, 0.22), rgba(109, 40, 217, 0) 70%),
     radial-gradient(closest-side at 66% 46%, rgba(2, 132, 199, 0.10), rgba(2, 132, 199, 0) 74%),
     radial-gradient(closest-side at 52% 62%, rgba(190, 18, 60, 0.08), rgba(190, 18, 60, 0) 76%);
   filter: blur(78px);
   opacity: 0.55;
   transform: translate3d(0, 0, 0) scale(1.02);
   animation: resonanceNebula 14s ease-in-out infinite alternate;
 }
 .resonance-stars {
   position: absolute;
   inset: 0;
   opacity: 0.24;
   background-image:
     radial-gradient(rgba(226, 232, 240, 0.5) 1px, rgba(0,0,0,0) 2px),
     radial-gradient(rgba(59, 130, 246, 0.28) 1px, rgba(0,0,0,0) 2px),
     radial-gradient(rgba(167, 139, 250, 0.28) 1px, rgba(0,0,0,0) 2px);
   background-size: 120px 120px, 180px 180px, 260px 260px;
   background-position: 0 0, 40px 70px, 120px 30px;
   mix-blend-mode: screen;
   animation: resonanceStars 12s linear infinite;
 }
 .resonance-motes {
   position: absolute;
   inset: -10%;
   opacity: 0.34;
   background-image:
     radial-gradient(rgba(226,232,240,0.55) 1px, rgba(0,0,0,0) 2px),
     radial-gradient(rgba(167,139,250,0.35) 1px, rgba(0,0,0,0) 2px),
     radial-gradient(rgba(59,130,246,0.25) 1px, rgba(0,0,0,0) 2px);
   background-size: 160px 160px, 220px 220px, 320px 320px;
   background-position: 0 0, 80px 40px, 140px 120px;
   filter: blur(0.3px);
   mix-blend-mode: screen;
   animation: resonanceMotes 9s linear infinite;
 }
 .resonance-fog {
   position: absolute;
   inset: -35%;
   opacity: 0.32;
   background:
     radial-gradient(closest-side at 40% 35%, rgba(76, 29, 149, 0.22), rgba(0,0,0,0) 72%),
     radial-gradient(closest-side at 62% 52%, rgba(88, 28, 135, 0.18), rgba(0,0,0,0) 76%),
     radial-gradient(closest-side at 52% 68%, rgba(127, 29, 29, 0.12), rgba(0,0,0,0) 78%);
   filter: blur(70px);
   mix-blend-mode: screen;
   animation: resonanceFog 18s ease-in-out infinite;
 }
 .resonance-vignette {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.72) 68%, rgba(0,0,0,0.93));
   animation: resonancePulse 9s ease-in-out infinite;
 }
 @keyframes resonanceNebula {
   0% { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1deg); }
   100% { transform: translate3d(2%, 1.5%, 0) scale(1.05) rotate(1deg); }
 }
 @keyframes resonanceStars {
   0% { transform: translate3d(0, 0, 0); }
   100% { transform: translate3d(-120px, 80px, 0); }
 }
 @keyframes resonanceMotes {
   0% { transform: translate3d(0, 0, 0); }
   100% { transform: translate3d(-160px, 110px, 0); }
 }
 @keyframes resonancePulse {
   0% { opacity: 1; }
   50% { opacity: 0.86; }
   100% { opacity: 1; }
 }
 @keyframes resonanceFog {
   0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.02); opacity: 0.28; }
   50% { transform: translate3d(2.5%, 1.6%, 0) rotate(2deg) scale(1.05); opacity: 0.36; }
   100% { transform: translate3d(-1.5%, 2.2%, 0) rotate(-1deg) scale(1.03); opacity: 0.30; }
 }
 .resonance-ui {
   position: relative;
   z-index: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 18px;
   padding: 24px;
 }
 .resonance-main-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 84px;
 }
 .resonance-attack-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   margin-top: -4px;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .resonance-attack-btn {
   min-width: 110px;
   height: 44px;
   border-radius: 14px;
   border: 1px solid rgba(148, 163, 184, 0.22);
   background: rgba(2, 6, 23, 0.55);
   color: #e2e8f0;
   font-weight: 800;
   letter-spacing: 2px;
   box-shadow: 0 10px 24px rgba(0,0,0,0.35);
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .resonance-attack-btn.active {
   border-color: rgba(56, 189, 248, 0.55);
   box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18), 0 14px 30px rgba(0,0,0,0.35);
   background: rgba(2, 6, 23, 0.32);
 }
 .resonance-tab-btn {
   min-width: 120px;
   height: 54px;
   border-radius: 14px;
   border: 1px solid rgba(148, 163, 184, 0.22);
   background: rgba(2, 6, 23, 0.55);
   color: #e2e8f0;
   font-weight: 800;
   letter-spacing: 2px;
   box-shadow: 0 10px 24px rgba(0,0,0,0.35);
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .resonance-tab-btn.active {
   border-color: rgba(56, 189, 248, 0.55);
   box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18), 0 14px 30px rgba(0,0,0,0.35);
   background: rgba(2, 6, 23, 0.32);
 }
 .resonance-model-slot {
   width: 160px;
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: transparent;
   border: none;
   box-shadow: none;
   position: relative;
   overflow: visible;
 }
 .resonance-model-slot .player {
   transform: none;
   filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.22));
 }
 .node-modal {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   box-sizing: border-box;
   background: radial-gradient(1200px 800px at 46% 10%, rgba(56,189,248,0.10), rgba(0,0,0,0) 55%), rgba(2,6,23,0.96);
   border: 0;
   border-radius: 0;
   padding: 22px 22px 18px 22px;
   z-index: 10025;
   display: none;
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .node-back-btn {
   position: fixed;
   bottom: 16px;
   right: 16px;
   padding: 10px 24px;
   background: rgba(2, 6, 23, 0.8);
   border: 1px solid rgba(148, 163, 184, 0.4);
   border-radius: 8px;
   color: #94a3b8;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s;
   z-index: 10026;
   pointer-events: auto;
 }
 .node-back-btn:hover {
   border-color: #e2e8f0;
   color: #e2e8f0;
   background: rgba(30, 41, 59, 0.8);
 }
 .node-modal-inner {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .node-body {
   width: min(1320px, calc(100vw - 44px));
   height: min(720px, calc(100vh - 44px));
   display: grid;
   grid-template-columns: 200px 160px minmax(0, 1fr);
   gap: 56px;
   align-items: center;
   will-change: transform;
 }
 .node-wheel {
   height: 460px;
   align-items: flex-start;
 }
 .node-model-slot {
   width: 160px;
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   border: 0;
   background: transparent;
   box-shadow: none;
 }
 .node-model-slot .player {
   transform: scale(0.9);
   filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.4));
 }
 .node-right {
   height: 100%;
 }
 .node-wheel-item {
   height: 86px;
   padding: 8px 10px;
   border-radius: 18px;
   width: 200px;
   display: flex;
   align-items: center;
   will-change: transform, opacity;
 }
 .node-wheel-row {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   justify-content: center;
 }
 .node-wheel-thumb {
   --node-thumb-round: 16px;
   --node-thumb-pad: 0px;
   --node-img-scale: 1.28;
   width: 56px;
   height: 56px;
   border-radius: var(--node-thumb-round);
   border: 1px solid rgba(148, 163, 184, 0.18);
   background: rgba(2,6,23,0.35);
   overflow: hidden;
   flex: 0 0 auto;
   box-shadow: 0 10px 18px rgba(0,0,0,0.30);
   padding: var(--node-thumb-pad);
   box-sizing: border-box;
   contain: paint;
 }
 .node-wheel-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translateZ(0) scale(var(--node-img-scale));
   transform-origin: 50% 50%;
   border-radius: var(--node-thumb-round);
   display: block;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   pointer-events: none;
 }
 .node-wheel-meta {
   min-width: 0;
   flex: 0 1 auto;
 }
 .node-wheel-name {
   font-size: 13px;
   font-weight: 900;
   line-height: 1.1;
   color: #e2e8f0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: left;
 }
 .node-wheel-item {
   filter: none;
   box-shadow: 0 10px 22px rgba(0,0,0,0.30), 0 0 0 1px rgba(2,6,23,0.45) inset;
 }
 .node-wheel-item.active {
   box-shadow: 0 0 0 2px rgba(125,211,252,0.26), 0 14px 26px rgba(0,0,0,0.34), 0 0 0 1px rgba(2,6,23,0.48) inset;
 }
 .node-wheel-item::before {
   content: none;
 }
 .node-wheel-item.wobble {
   animation: none;
 }
 .node-modal.node-lite .node-wheel {
   perspective: none;
   transform-style: flat;
 }
 .node-modal.node-lite .node-wheel-item {
   box-shadow: none;
   border-color: rgba(51,65,85,0.55);
   background: rgba(2,6,23,0.35);
 }
 .node-modal.node-lite .node-wheel-thumb {
   box-shadow: none;
 }
 .node-modal.node-lite .node-wheel-item.active {
   box-shadow: 0 0 0 1px rgba(125,211,252,0.22);
 }
 .resonance-panel {
   width: min(680px, 92%);
   border-radius: 16px;
   border: 1px solid rgba(148, 163, 184, 0.18);
   background: rgba(2, 6, 23, 0.46);
   box-shadow: 0 10px 30px rgba(0,0,0,0.45);
   padding: 14px 16px;
 }
 .resonance-panel-inner {
   min-height: 110px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 10px;
   color: rgba(226, 232, 240, 0.9);
   font-weight: 800;
   letter-spacing: 2px;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .resonance-panel-title {
   font-size: 16px;
   padding: 6px 10px;
   border-radius: 12px;
   border: 1px solid rgba(56, 189, 248, 0.22);
   background: rgba(0, 0, 0, 0.22);
   box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08);
 }
 
 .resonance-fly,
 .resonance-ghost {
   position: fixed;
   pointer-events: none;
   z-index: 10030;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .resonance-fly {
   will-change: transform, opacity, filter;
   filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.22));
   transform-origin: center;
   opacity: 1;
 }
 .resonance-fly.fade-out {
   opacity: 0;
   transition: opacity 220ms ease;
 }
 .resonance-ghost {
   opacity: 0.22;
   filter: blur(1px) brightness(1.15);
   mix-blend-mode: screen;
   transform-origin: center;
   animation: resonanceGhostFade 520ms ease-out forwards;
 }
 @keyframes resonanceGhostFade {
   0% { opacity: 0.22; filter: blur(1px) brightness(1.15); }
   100% { opacity: 0; filter: blur(10px) brightness(1.35); }
 }